d8dfun/bmad-method-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复 server.js URL 解析，支持查询参数

Browse Source 
- 修改 server.js 第48行，使用 req.url.split('?')[0] 剥离查询参数
- 修复 view-doc.html?doc=xxx 无法访问的问题
- 更新文档链接从模态框改为独立页面展示
- 前端 Markdown 渲染，不使用后端 API

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Code
2026-03-29 04:14:01 +00:00
parent 88e569dda5
commit 3e02f2c7a2
4 changed files with 266 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
prototype/docs-index.html
View File

@@ -23,16 +23,6 @@
.stat-item {
background: linear-gradient(135deg, var(--primary-blue), #40a9ff);
}
.doc-content {
margin-top: 1rem;
padding: 2rem;
background: white;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.doc-content.hidden {
display: none;
}
.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; }
@@ -155,11 +145,10 @@
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">技术架构</span>
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">数据模型</span>
</div>
<a href="#" onclick="toggleDoc('prd.md'); return false;" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
<a href="view-doc.html?doc=prd.md" target="_self" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
<i class="fas fa-eye mr-2"></i>查看文档
</a>
</div>
<div id="doc-prd.md" class="doc-content hidden"></div>
</div>
</div>
</div>
@@ -202,11 +191,10 @@
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">色彩系统</span>
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">无障碍</span>
</div>
<a href="#" onclick="toggleDoc('ux-design-specification.md'); return false;" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
<a href="view-doc.html?doc=ux-design-specification.md" target="_self" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
<i class="fas fa-eye mr-2"></i>查看文档
</a>
</div>
<div id="doc-ux-design-specification.md" class="doc-content hidden"></div>
</div>
</div>
</div>
@@ -249,11 +237,10 @@
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">任务制定</span>
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">AI抽背</span>
</div>
<a href="#" onclick="toggleDoc('ai-tutor-requirements.md'); return false;" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
<a href="view-doc.html?doc=ai-tutor-requirements.md" target="_self" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
<i class="fas fa-eye mr-2"></i>查看文档
</a>
</div>
<div id="doc-ai-tutor-requirements.md" class="doc-content hidden"></div>
</div>
</div>
</div>
@@ -338,39 +325,5 @@
</div>
</footer>
<script>
const md = window.markdownit({ html: true, linkify: true, breaks: true });
function toggleDoc(docFile) {
const container = document.getElementById('doc-' + docFile);
const isHidden = container.classList.contains('hidden');
// 隐藏所有其他文档
document.querySelectorAll('.doc-content').forEach(el => {
el.classList.add('hidden');
});
if (isHidden) {
// 显示加载动画
container.innerHTML = '<div 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>';
container.classList.remove('hidden');
loadDoc(docFile, container);
}
}
async function loadDoc(doc, container) {
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);
container.innerHTML = '<div class="markdown-body">' + html + '</div>';
return;
}
} catch (e) { continue; }
}
container.innerHTML = '<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">无法加载文档: ' + doc + '</div>';
}
</script>
</body>
</html>

59
prototype/index.html
View File

@@ -295,10 +295,10 @@
基于 PRD 和 UX 设计规范自动生成 | 2026-03-28
</div>
<div class="flex items-center gap-4 text-sm">
<a href="#" onclick="toggleDoc('prd.md'); return false;" class="text-gray-400 hover:text-white">
<a href="view-doc.html?doc=prd.md" class="text-gray-400 hover:text-white">
<i class="fas fa-file-alt mr-1"></i>PRD
</a>
<a href="#" onclick="toggleDoc('ux-design-specification.md'); return false;" class="text-gray-400 hover:text-white">
<a href="view-doc.html?doc=ux-design-specification.md" class="text-gray-400 hover:text-white">
<i class="fas fa-palette mr-1"></i>UX
</a>
</div>
@@ -306,60 +306,5 @@
</div>
</footer>
<style>
.doc-content {
margin: 2rem auto;
max-width: 1200px;
padding: 2rem;
background: white;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.doc-content.hidden {
display: none;
}
</style>
<div id="doc-prd.md" class="doc-content hidden"></div>
<div id="doc-ux-design-specification.md" class="doc-content hidden"></div>
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
<script>
const md = window.markdownit({ html: true, linkify: true, typographer: true, breaks: true });
function toggleDoc(docFile) {
const container = document.getElementById('doc-' + docFile);
const isHidden = container.classList.contains('hidden');
// 隐藏所有文档
document.querySelectorAll('.doc-content').forEach(el => {
el.classList.add('hidden');
});
if (isHidden) {
container.innerHTML = '<div 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>';
container.classList.remove('hidden');
loadDoc(docFile, container);
// 滚动到文档位置
container.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
async function loadDoc(docFile, container) {
const paths = ['/planning-artifacts/' + docFile, '/' + docFile];
for (const path of paths) {
try {
const res = await fetch(path);
if (res.ok) {
const text = await res.text();
const html = md.render(text);
container.innerHTML = html;
return;
}
} catch (e) { continue; }
}
container.innerHTML = '<p class="text-red-600">无法加载文档: ' + docFile + '</p>';
}
</script>
</body>
</html>

2
prototype/server.js vendored
View File

@@ -45,7 +45,7 @@ const MIME_TYPES = {
// 创建服务器
const server = http.createServer((req, res) => {
// 解析 URL
let urlPath = req.url;
let urlPath = req.url.split('?')[0] || '/';
// 处理根路径
if (urlPath === '/') {

329
prototype/view-doc.html
View File

@@ -8,93 +8,284 @@
<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>
.markdown-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #24292f; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; }
.markdown-body h1 { font-size: 2em; border-bottom: 1px solid #d8dee4; padding-bottom: 0.3em; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #d8dee4; padding-bottom: 0.3em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body p { margin-top: 0; margin-bottom: 16px; }
.markdown-body code { padding: 0.2em 0.4em; margin: 0; font-size: 85%; background-color: rgba(175, 184, 193, 0.2); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; }
.markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: #1f2937; border-radius: 6px; margin-bottom: 16px; }
.markdown-body pre code { background-color: transparent; padding: 0; color: #e5e7eb; }
.markdown-body ul, .markdown-body ol { padding-left: 2em; margin-top: 0; margin-bottom: 16px; }
.markdown-body li { margin-top: 0.25em; }
.markdown-body table { border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-bottom: 16px; width: 100%; }
.markdown-body table th { font-weight: 600; background-color: #f6f8fa; border: 1px solid #d8dee4; padding: 6px 13px; }
.markdown-body table td { border: 1px solid #d8dee4; padding: 6px 13px; }
.markdown-body table tr:nth-child(2n) { background-color: #f6f8fa; }
.markdown-body blockquote { padding: 0 1em; color: #57606a; border-left: 0.25em solid #d8dee4; margin: 0 0 16px 0; }
.markdown-body a { color: #0969da; text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body img { max-width: 100%; box-sizing: content-box; background-color: #fff; }
.markdown-body hr { height: 0.25em; padding: 0; margin: 24px 0; background-color: #d8dee4; border: 0; }
.loading { display: flex; justify-content: center; align-items: center; height: 200px; }
.loading-spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.error { background-color: #fee; border: 1px solid #fcc; padding: 16px; border-radius: 6px; color: #c33; }
/* Markdown 内容样式 */
.markdown-body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #24292f;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
.markdown-body h1 {
font-size: 2em;
border-bottom: 1px solid #d8dee4;
padding-bottom: 0.3em;
}
.markdown-body h2 {
font-size: 1.5em;
border-bottom: 1px solid #d8dee4;
padding-bottom: 0.3em;
}
.markdown-body h3 {
font-size: 1.25em;
}
.markdown-body h4 {
font-size: 1em;
}
.markdown-body p {
margin-top: 0;
margin-bottom: 16px;
}
.markdown-body code {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: rgba(175, 184, 193, 0.2);
border-radius: 6px;
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
}
.markdown-body pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #1f2937;
border-radius: 6px;
margin-bottom: 16px;
}
.markdown-body pre code {
background-color: transparent;
padding: 0;
color: #e5e7eb;
}
.markdown-body ul,
.markdown-body ol {
padding-left: 2em;
margin-top: 0;
margin-bottom: 16px;
}
.markdown-body li {
margin-top: 0.25em;
}
.markdown-body table {
border-spacing: 0;
border-collapse: collapse;
margin-top: 0;
margin-bottom: 16px;
width: 100%;
}
.markdown-body table th {
font-weight: 600;
background-color: #f6f8fa;
border: 1px solid #d8dee4;
padding: 6px 13px;
}
.markdown-body table td {
border: 1px solid #d8dee4;
padding: 6px 13px;
}
.markdown-body table tr:nth-child(2n) {
background-color: #f6f8fa;
}
.markdown-body blockquote {
padding: 0 1em;
color: #57606a;
border-left: 0.25em solid #d8dee4;
margin: 0 0 16px 0;
}
.markdown-body a {
color: #0969da;
text-decoration: none;
}
.markdown-body a:hover {
text-decoration: underline;
}
.markdown-body img {
max-width: 100%;
box-sizing: content-box;
background-color: #fff;
}
.markdown-body hr {
height: 0.25em;
padding: 0;
margin: 24px 0;
background-color: #d8dee4;
border: 0;
}
/* 加载动画 */
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 错误提示 */
.error {
background-color: #fee;
border: 1px solid #fcc;
padding: 16px;
border-radius: 6px;
color: #c33;
text-align: center;
}
</style>
</head>
<body class="bg-gray-50">
<!-- 顶部导航栏 -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<button onclick="goBack()" class="mr-4 p-2 rounded-lg hover:bg-gray-100 transition"><i class="fas fa-arrow-left text-gray-600"></i></button>
<h1 id="doc-title" class="text-xl font-semibold text-gray-800">文档查看器</h1>
</div>
<div class="flex items-center gap-2">
<button onclick="copyLink()" class="px-3 py-1.5 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition"><i class="fas fa-link mr-1"></i>复制链接</button>
<button onclick="printDoc()" class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"><i class="fas fa-print mr-1"></i>打印</button>
</div>
<div class="max-w-7xl 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="doc-title" class="text-xl font-semibold flex-1">文档加载中...</h1>
<div class="flex items-center gap-2">
<button onclick="copyLink()" class="px-3 py-1.5 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
<i class="fas fa-link mr-1"></i>复制链接
</button>
<button onclick="printDoc()" class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">
<i class="fas fa-print mr-1"></i>打印
</button>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div id="loading" class="loading"><div class="loading-spinner"></div></div>
<!-- 主内容区 -->
<main class="max-w-7xl mx-auto px-4 py-8">
<!-- 加载动画 -->
<div id="loading" class="loading">
<div class="loading-spinner"></div>
</div>
<!-- 错误提示 -->
<div id="error" class="error hidden"></div>
<!-- Markdown 内容 -->
<article id="content" class="markdown-body bg-white rounded-xl shadow-sm p-8 hidden"></article>
</main>
<footer class="bg-white border-t mt-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<p class="text-center text-sm text-gray-500">© 2026 AI 智能抽背助手 | 基于 <a href="https://markdown-it.github.io/" target="_blank" class="text-blue-600 hover:underline">markdown-it</a> 渲染</p>
</div>
<!-- 页脚 -->
<footer class="text-center py-6 text-sm text-gray-500">
© 2026 AI 智能抽背助手 | 基于 markdown-it 渲染
</footer>
<script>
const md = window.markdownit({ html: true, linkify: true, typographer: true, breaks: true });
function getQueryParam(name) { const params = new URLSearchParams(window.location.search); return params.get(name); }
function goBack() { if (window.history.length > 1) { window.history.back(); } else { window.location.href = 'docs-index.html'; } }
function copyLink() { const url = window.location.href; navigator.clipboard.writeText(url).then(() => { alert('链接已复制到剪贴板'); }).catch(err => { console.error('复制失败:', err); }); }
function printDoc() { window.print(); }
async function loadAndRenderDoc() {
const docPath = getQueryParam('doc');
if (!docPath) { showError('未指定文档路径'); return; }
const title = docPath.replace(/\.md$/, '').replace(/-/g, ' ');
document.getElementById('doc-title').textContent = title;
try {
const possiblePaths = [`/planning-artifacts/${docPath}`, `/${docPath}`, `/../${docPath}`];
let markdown = null;
for (const docUrl of possiblePaths) {
try {
const response = await fetch(docUrl);
if (response.ok) { markdown = await response.text(); break; }
} catch (err) { continue; }
}
if (!markdown) { throw new Error(`无法加载文档: ${docPath}`); }
const html = md.render(markdown);
document.getElementById('loading').classList.add('hidden');
document.getElementById('content').classList.remove('hidden');
document.getElementById('content').innerHTML = html;
} catch (error) {
console.error('加载文档失败:', error);
showError(`加载文档失败: ${error.message}`);
}
// 初始化 markdown-it
const md = window.markdownit({
html: true,
linkify: true,
typographer: true,
breaks: true
});
// 获取 URL 参数
function getQueryParam(name) {
const params = new URLSearchParams(window.location.search);
return params.get(name);
}
// 复制链接
function copyLink() {
const url = window.location.href;
navigator.clipboard.writeText(url)
.then(() => {
alert('链接已复制到剪贴板');
})
.catch(err => {
console.error('复制失败:', err);
});
}
// 打印文档
function printDoc() {
window.print();
}
// 显示错误信息
function showError(message) {
document.getElementById('loading').classList.add('hidden');
document.getElementById('error').classList.remove('hidden');
document.getElementById('error').textContent = message;
}
// 加载并渲染文档
async function loadAndRenderDoc() {
const docPath = getQueryParam('doc');
if (!docPath) {
showError('未指定文档路径，请使用 ?doc=文件名.md 参数访问');
return;
}
// 从文件名提取标题
const title = docPath
.replace(/\.md$/, '')
.replace(/-/g, ' ')
.replace(/\b\w/g, l => l.toUpperCase());
document.getElementById('doc-title').textContent = title;
// 尝试多个路径查找文档
const possiblePaths = [
`../planning-artifacts/${docPath}`,
`../docs/${docPath}`,
`../${docPath}`,
`planning-artifacts/${docPath}`,
`docs/${docPath}`,
docPath
];
let markdown = null;
let loadedPath = null;
for (const path of possiblePaths) {
try {
const response = await fetch(path);
if (response.ok) {
markdown = await response.text();
loadedPath = path;
break;
}
} catch (err) {
// 继续尝试下一个路径
continue;
}
}
if (!markdown) {
showError(`无法加载文档: ${docPath}<br>已尝试以下路径:<br>${possiblePaths.join('<br>')}`);
return;
}
// 渲染 Markdown
const html = md.render(markdown);
// 显示内容
document.getElementById('loading').classList.add('hidden');
document.getElementById('content').classList.remove('hidden');
document.getElementById('content').innerHTML = html;
}
// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', loadAndRenderDoc);
</script>
</body>