refactor: 改进文档展示方式，去除模态框直接在页面中展开

- 移除模态框方案，改为直接在页面中展开文档
- 文档点击后直接在页面下方显示，无需弹窗
- 简化用户交互，提升使用体验
- 更新技能文件，明确前端渲染方案

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

prototype/docs-index.html

@@ -23,9 +23,16 @@
         .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; }
+        .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; }
@@ -148,10 +155,11 @@
                                         <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="openModal('prd.md'); return false;" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">
+                                    <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">
                                         <i class="fas fa-eye mr-2"></i>查看文档
                                     </a>
                                 </div>
+                                <div id="doc-prd.md" class="doc-content hidden"></div>
                             </div>
                         </div>
                     </div>
@@ -194,10 +202,11 @@
                                         <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="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">
+                                    <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">
                                         <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>
@@ -240,10 +249,11 @@
                                         <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="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">
+                                    <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">
                                         <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>
@@ -328,37 +338,25 @@
         </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 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);
+        }
     }
-    function closeModal() {
-        document.getElementById('markdownModal').classList.remove('active');
-    }
-    async function loadDoc(doc) {
+    async function loadDoc(doc, container) {
         const paths = ['/planning-artifacts/' + doc, '/' + doc];
         for (const path of paths) {
             try {
@@ -366,21 +364,13 @@
                 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;
+                    container.innerHTML = '<div class="markdown-body">' + html + '</div>';
                     return;
                 }
             } catch (e) { continue; }
         }
-        document.getElementById('modalLoading').classList.add('hidden');
-        document.getElementById('modalError').classList.remove('hidden');
-        document.getElementById('modalError').textContent = '无法加载文档: ' + doc;
+        container.innerHTML = '<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">无法加载文档: ' + doc + '</div>';
     }
-    // 点击模态框背景关闭
-    document.getElementById('markdownModal').addEventListener('click', function(e) {
-        if (e.target === this) closeModal();
-    });
     </script>
 </body>
 </html>

prototype/index.html

@@ -34,17 +34,6 @@
             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>
@@ -306,10 +295,10 @@
                     基于 PRD 和 UX 设计规范自动生成 | 2026-03-28
                 </div>
                 <div class="flex items-center gap-4 text-sm">
-                    <a href="#" onclick="openModal('prd.md'); return false;" class="text-gray-400 hover:text-white">
+                    <a href="#" onclick="toggleDoc('prd.md'); return false;" class="text-gray-400 hover:text-white">
                         <i class="fas fa-file-alt mr-1"></i>PRD
                     </a>
-                    <a href="#" onclick="openModal('ux-design-specification.md'); return false;" class="text-gray-400 hover:text-white">
+                    <a href="#" onclick="toggleDoc('ux-design-specification.md'); return false;" class="text-gray-400 hover:text-white">
                         <i class="fas fa-palette mr-1"></i>UX
                     </a>
                 </div>
@@ -317,59 +306,60 @@
         </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>
+    <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, 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);
+    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' });
+        }
     }
-    function closeModal() {
-        document.getElementById('markdownModal').classList.remove('active');
-    }
-    async function loadDoc(doc) {
-        const paths = ['/planning-artifacts/' + doc, '/' + doc];
+
+    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);
-                    document.getElementById('modalLoading').classList.add('hidden');
-                    document.getElementById('modalContent').classList.remove('hidden');
-                    document.getElementById('modalContent').innerHTML = html;
+                    container.innerHTML = html;
                     return;
                 }
             } catch (e) { continue; }
         }
-        document.getElementById('modalLoading').classList.add('hidden');
-        document.getElementById('modalError').classList.remove('hidden');
-        document.getElementById('modalError').textContent = '无法加载文档: ' + doc;
+        container.innerHTML = '<p class="text-red-600">无法加载文档: ' + docFile + '</p>';
     }
-    // 点击模态框背景关闭
-    document.getElementById('markdownModal').addEventListener('click', function(e) {
-        if (e.target === this) closeModal();
-    });
     </script>
 </body>
 </html>