feat: 添加 Markdown 文档渲染功能

- 在文档中心和首页添加内嵌 Markdown 渲染器
- 使用 markdown-it 库在前端渲染 Markdown 内容
- 添加模态框展示渲染后的文档
- 重命名 {output_folder} 为 planning-artifacts
- 修改 server.js 支持父目录文件服务
- 文档链接现在可以正确显示格式化的 HTML

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package-lock.json

@@ -0,0 +1,77 @@
+{
+  "name": "226-244-template-6",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "markdown-it": "^14.1.1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "markdown-it": "^14.1.1"
+  }
+}

prototype/docs-index.html

@@ -23,7 +23,19 @@
         .stat-item {
             background: linear-gradient(135deg, var(--primary-blue), #40a9ff);
         }
+        .markdown-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
+        .markdown-modal.active { display: flex; }
+        .markdown-content { flex: 1; overflow-y: auto; background: white; max-width: 1200px; margin: 2rem; padding: 2rem; border-radius: 0.5rem; }
+        .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; }
+        .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; }
     </style>
+    <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- 导航栏 -->
@@ -136,8 +148,8 @@
                                         <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="../{output_folder}/planning-artifacts/prd.md" target="_blank" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
-                                        <i class="fas fa-external-link-alt mr-2"></i>查看文档
+                                    <a href="#" onclick="openModal('prd.md'); return false;" 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>
@@ -182,8 +194,8 @@
                                         <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="../{output_folder}/planning-artifacts/ux-design-specification.md" target="_blank" class="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700">
-                                        <i class="fas fa-external-link-alt mr-2"></i>查看文档
+                                    <a href="#" onclick="openModal('ux-design-specification.md'); return false;" 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>
@@ -228,8 +240,8 @@
                                         <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="../ai-tutor-requirements.md" target="_blank" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700">
-                                        <i class="fas fa-external-link-alt mr-2"></i>查看文档
+                                    <a href="#" onclick="openModal('ai-tutor-requirements.md'); return false;" 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>
@@ -315,5 +327,60 @@
             </div>
         </div>
     </footer>
+
+    <!-- Markdown 模态框 -->
+    <div id="markdownModal" class="markdown-modal">
+        <div class="flex-1 flex flex-col">
+            <div class="bg-white border-b px-6 py-4 flex items-center justify-between">
+                <h2 id="modalTitle" class="text-xl font-semibold"></h2>
+                <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
+            </div>
+            <div class="markdown-content markdown-body">
+                <div id="modalLoading" 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="modalError" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg"></div>
+                <div id="modalContent" class="hidden prose max-w-none"></div>
+            </div>
+        </div>
+    </div>
+    <script>
+    const md = window.markdownit({ html: true, linkify: true, breaks: true });
+    function openModal(doc) {
+        document.getElementById('markdownModal').classList.add('active');
+        document.getElementById('modalTitle').textContent = doc.replace(/\.md$/, '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        document.getElementById('modalLoading').classList.remove('hidden');
+        document.getElementById('modalError').classList.add('hidden');
+        document.getElementById('modalContent').classList.add('hidden');
+        loadDoc(doc);
+    }
+    function closeModal() {
+        document.getElementById('markdownModal').classList.remove('active');
+    }
+    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('modalLoading').classList.add('hidden');
+                    document.getElementById('modalContent').classList.remove('hidden');
+                    document.getElementById('modalContent').innerHTML = html;
+                    return;
+                }
+            } catch (e) { continue; }
+        }
+        document.getElementById('modalLoading').classList.add('hidden');
+        document.getElementById('modalError').classList.remove('hidden');
+        document.getElementById('modalError').textContent = '无法加载文档: ' + doc;
+    }
+    // 点击模态框背景关闭
+    document.getElementById('markdownModal').addEventListener('click', function(e) {
+        if (e.target === this) closeModal();
+    });
+    </script>
 </body>
 </html>

prototype/index.html

@@ -34,7 +34,19 @@
             border-radius: 16px;
             font-size: 28px;
         }
+        .markdown-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
+        .markdown-modal.active { display: flex; }
+        .markdown-content { flex: 1; overflow-y: auto; background: white; max-width: 1200px; margin: 2rem; padding: 2rem; border-radius: 0.5rem; }
+        .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; }
+        .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; }
     </style>
+    <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.0.0/dist/markdown-it.min.js"></script>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- 导航栏 -->
@@ -294,15 +306,70 @@
                     基于 PRD 和 UX 设计规范自动生成 | 2026-03-28
                 </div>
                 <div class="flex items-center gap-4 text-sm">
-                    <a href="../{output_folder}/planning-artifacts/prd.md" target="_blank" class="text-gray-400 hover:text-white">
+                    <a href="#" onclick="openModal('prd.md'); return false;" class="text-gray-400 hover:text-white">
                         <i class="fas fa-file-alt mr-1"></i>PRD
                     </a>
-                    <a href="../{output_folder}/planning-artifacts/ux-design-specification.md" target="_blank" class="text-gray-400 hover:text-white">
+                    <a href="#" onclick="openModal('ux-design-specification.md'); return false;" class="text-gray-400 hover:text-white">
                         <i class="fas fa-palette mr-1"></i>UX
                     </a>
                 </div>
             </div>
         </div>
     </footer>
+
+    <!-- Markdown 模态框 -->
+    <div id="markdownModal" class="markdown-modal">
+        <div class="flex-1 flex flex-col">
+            <div class="bg-white border-b px-6 py-4 flex items-center justify-between">
+                <h2 id="modalTitle" class="text-xl font-semibold"></h2>
+                <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
+            </div>
+            <div class="markdown-content markdown-body">
+                <div id="modalLoading" 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="modalError" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg"></div>
+                <div id="modalContent" class="hidden prose max-w-none"></div>
+            </div>
+        </div>
+    </div>
+    <script>
+    const md = window.markdownit({ html: true, linkify: true, breaks: true });
+    function openModal(doc) {
+        document.getElementById('markdownModal').classList.add('active');
+        document.getElementById('modalTitle').textContent = doc.replace(/\.md$/, '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        document.getElementById('modalLoading').classList.remove('hidden');
+        document.getElementById('modalError').classList.add('hidden');
+        document.getElementById('modalContent').classList.add('hidden');
+        loadDoc(doc);
+    }
+    function closeModal() {
+        document.getElementById('markdownModal').classList.remove('active');
+    }
+    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('modalLoading').classList.add('hidden');
+                    document.getElementById('modalContent').classList.remove('hidden');
+                    document.getElementById('modalContent').innerHTML = html;
+                    return;
+                }
+            } catch (e) { continue; }
+        }
+        document.getElementById('modalLoading').classList.add('hidden');
+        document.getElementById('modalError').classList.remove('hidden');
+        document.getElementById('modalError').textContent = '无法加载文档: ' + doc;
+    }
+    // 点击模态框背景关闭
+    document.getElementById('markdownModal').addEventListener('click', function(e) {
+        if (e.target === this) closeModal();
+    });
+    </script>
 </body>
 </html>

prototype/markdown-template.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{title}}</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            line-height: 1.8;
+            color: #333;
+            background: #f8f9fa;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+        .markdown-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 60px 20px;
+            text-align: center;
+            margin-bottom: 40px;
+            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
+        }
+        .markdown-header h1 {
+            font-size: 2.5em;
+            font-weight: 700;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+        }
+        .markdown-content {
+            background: white;
+            padding: 40px 50px;
+            border-radius: 12px;
+            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+        }
+        .markdown-content h1,
+        .markdown-content h2,
+        .markdown-content h3,
+        .markdown-content h4,
+        .markdown-content h5,
+        .markdown-content h6 {
+            margin-top: 1.5em;
+            margin-bottom: 0.8em;
+            font-weight: 600;
+            line-height: 1.4;
+        }
+        .markdown-content h1 {
+            font-size: 2em;
+            border-bottom: 3px solid #667eea;
+            padding-bottom: 0.3em;
+        }
+        .markdown-content h2 {
+            font-size: 1.6em;
+            border-bottom: 2px solid #e0e0e0;
+            padding-bottom: 0.2em;
+        }
+        .markdown-content h3 {
+            font-size: 1.3em;
+            color: #555;
+        }
+        .markdown-content p {
+            margin-bottom: 1em;
+        }
+        .markdown-content a {
+            color: #667eea;
+            text-decoration: none;
+            border-bottom: 1px dotted #667eea;
+        }
+        .markdown-content a:hover {
+            color: #764ba2;
+            border-bottom-style: solid;
+        }
+        .markdown-content ul,
+        .markdown-content ol {
+            margin-left: 2em;
+            margin-bottom: 1em;
+        }
+        .markdown-content li {
+            margin-bottom: 0.5em;
+        }
+        .markdown-content code {
+            background: #f4f4f4;
+            padding: 0.2em 0.4em;
+            border-radius: 4px;
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.9em;
+            color: #e74c3c;
+        }
+        .markdown-content pre {
+            background: #2d2d2d;
+            color: #f8f8f2;
+            padding: 20px;
+            border-radius: 8px;
+            overflow-x: auto;
+            margin-bottom: 1.5em;
+        }
+        .markdown-content pre code {
+            background: transparent;
+            color: inherit;
+            padding: 0;
+        }
+        .markdown-content blockquote {
+            border-left: 4px solid #667eea;
+            padding-left: 20px;
+            margin: 1.5em 0;
+            color: #666;
+            background: #f8f9fa;
+            padding: 15px 20px;
+            border-radius: 0 8px 8px 0;
+        }
+        .markdown-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 1.5em;
+        }
+        .markdown-content table th,
+        .markdown-content table td {
+            border: 1px solid #ddd;
+            padding: 12px;
+            text-align: left;
+        }
+        .markdown-content table th {
+            background: #667eea;
+            color: white;
+            font-weight: 600;
+        }
+        .markdown-content table tr:nth-child(even) {
+            background: #f8f9fa;
+        }
+        .markdown-content img {
+            max-width: 100%;
+            border-radius: 8px;
+            margin: 1.5em 0;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .markdown-content hr {
+            border: none;
+            border-top: 2px solid #e0e0e0;
+            margin: 2em 0;
+        }
+        .back-link {
+            text-align: center;
+            margin-top: 30px;
+        }
+        .back-link a {
+            display: inline-block;
+            padding: 10px 24px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            text-decoration: none;
+            border-radius: 25px;
+            border: none;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .back-link a:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+    </style>
+</head>
+<body>
+    <div class="markdown-header">
+        <h1>{{title}}</h1>
+    </div>
+    <div class="container">
+        <div class="markdown-content">
+            {{content}}
+        </div>
+        <div class="back-link">
+            <a href="/">返回首页</a>
+        </div>
+    </div>
+</body>
+</html>

prototype/md-view.html

@@ -0,0 +1,79 @@
+<!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>

prototype/server.js

@@ -22,6 +22,7 @@ const { exec } = require('child_process');
 
 const PORT = 8080;
 const PROTOTYPE_DIR = __dirname;
+const PARENT_DIR = path.dirname(__dirname);
 
 // MIME 类型映射
 const MIME_TYPES = {
@@ -52,7 +53,7 @@ const server = http.createServer((req, res) => {
     }
 
     // 构建文件路径
-    const filePath = path.join(PROTOTYPE_DIR, urlPath);
+    const filePath = urlPath.startsWith("/planning-artifacts/") ? path.join(PARENT_DIR, urlPath) : path.join(PROTOTYPE_DIR, urlPath);
     const extname = path.extname(filePath).toLowerCase();
 
     // 设置响应头

prototype/view-doc.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>文档查看器 - AI 智能抽背助手</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>
+        .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; }
+    </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>
+        </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>
+        <div id="error" class="error hidden"></div>
+        <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>
+    <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}`);
+            }
+        }
+        function showError(message) {
+            document.getElementById('loading').classList.add('hidden');
+            document.getElementById('error').classList.remove('hidden');
+            document.getElementById('error').textContent = message;
+        }
+        window.addEventListener('DOMContentLoaded', loadAndRenderDoc);
+    </script>
+</body>
+</html>