From f4247532b4567e6768b1014d1bdebbda64c4fb5c Mon Sep 17 00:00:00 2001
From: sususu98 <suchangshan@foxmail.com>
Date: Tue, 10 Mar 2026 00:08:01 +0800
Subject: [PATCH] fix: optimize xcodeclaw page hero layout, outline nav, and
 comparison table

---
 docs/xcodeclaw.md | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/docs/xcodeclaw.md b/docs/xcodeclaw.md
index 74927c1..7d5e4bd 100644
--- a/docs/xcodeclaw.md
+++ b/docs/xcodeclaw.md
@@ -25,10 +25,10 @@ title: XCodeClaw - AI 学术助手
 </div>
 
 <!-- 核心优势 -->
-<div class="xclaw-section xclaw-section-alt">
+<div id="core-advantages" class="xclaw-section xclaw-section-alt">
   <div class="xclaw-inner">
     <div class="xclaw-slabel">Core Advantages</div>
-    <div class="xclaw-stitle">为什么选择 XCodeClaw？</div>
+    <h2 id="core-advantages" class="xclaw-stitle">为什么选择 XCodeClaw？</h2>
     <p class="xclaw-sdesc">不只是一个聊天机器人，而是一个真正懂学术的 AI 科研伙伴。</p>
     <div class="xclaw-grid">
       <div class="xclaw-card">
@@ -66,10 +66,10 @@ title: XCodeClaw - AI 学术助手
 </div>
 
 <!-- 学术场景 -->
-<div class="xclaw-section">
+<div id="scenarios" class="xclaw-section">
   <div class="xclaw-inner">
     <div class="xclaw-slabel">Academic Scenarios</div>
-    <div class="xclaw-stitle">专为科研场景打造</div>
+    <h2 id="scenarios" class="xclaw-stitle">专为科研场景打造</h2>
     <p class="xclaw-sdesc">从文献调研到论文写作，从数据分析到报告排版，覆盖科研全流程。</p>
     <div class="xclaw-showcase">
       <div class="xclaw-showcase-text">
@@ -119,10 +119,10 @@ title: XCodeClaw - AI 学术助手
 </div>
 
 <!-- 对比 -->
-<div class="xclaw-section xclaw-section-alt">
+<div id="comparison" class="xclaw-section xclaw-section-alt">
   <div class="xclaw-inner">
     <div class="xclaw-slabel">Comparison</div>
-    <div class="xclaw-stitle">与通用 AI 工具的区别</div>
+    <h2 id="comparison" class="xclaw-stitle">与通用 AI 工具的区别</h2>
     <p class="xclaw-sdesc">通用 AI 工具缺乏科研专业性，XCodeClaw 专为学术场景深度定制。</p>
     <table class="xclaw-compare">
       <thead>
@@ -131,7 +131,7 @@ title: XCodeClaw - AI 学术助手
       <tbody>
         <tr><td>满血 Opus 4.6 模型</td><td class="xc-yes">✓ 完整版</td><td class="xc-no">— 通常为低配版本</td></tr>
         <tr><td>实时联网检索</td><td class="xc-yes">✓ Tavily 学术搜索</td><td class="xc-no">— 无或受限</td></tr>
-        <tr><td>AI 画图（4K）</td><td class="xc-yes">✓ Banana / Gemini</td><td class="xc-no">— 无或需额外付费</td></tr>
+        <tr><td>AI 画图（4K）</td><td class="xc-yes">✓ Banana</td><td class="xc-no">— 无或需额外付费</td></tr>
         <tr><td>LaTeX 编译输出 PDF</td><td class="xc-yes">✓ TeX Live 完整版</td><td class="xc-no">— 仅输出代码片段</td></tr>
         <tr><td>科学计算环境</td><td class="xc-yes">✓ 完整 Python 数据分析栈</td><td class="xc-no">— 无执行环境</td></tr>
         <tr><td>学术引用规范</td><td class="xc-yes">✓ 严格学术来源</td><td class="xc-no">— 可能编造引用</td></tr>
@@ -144,10 +144,10 @@ title: XCodeClaw - AI 学术助手
 </div>
 
 <!-- 三步开始使用 -->
-<div class="xclaw-section xclaw-section-dark">
+<div id="quick-start" class="xclaw-section xclaw-section-dark">
   <div class="xclaw-inner">
     <div class="xclaw-slabel xclaw-slabel-accent">Quick Start</div>
-    <div class="xclaw-stitle" style="color: #fff;">三步开始使用</div>
+    <h2 id="quick-start" class="xclaw-stitle" style="color: #fff;">三步开始使用</h2>
     <p class="xclaw-sdesc">无需安装软件，无需配置环境，飞书里直接用。</p>
     <div class="xclaw-steps">
       <div class="xclaw-step">
@@ -170,10 +170,10 @@ title: XCodeClaw - AI 学术助手
 </div>
 
 <!-- 技术架构 -->
-<div class="xclaw-section">
+<div id="tech-stack" class="xclaw-section">
   <div class="xclaw-inner">
     <div class="xclaw-slabel">Tech Stack</div>
-    <div class="xclaw-stitle">技术架构</div>
+    <h2 id="tech-stack" class="xclaw-stitle">技术架构</h2>
     <p class="xclaw-sdesc">基于 OpenClaw 构建，企业级多租户架构，安全可靠。</p>
     <div class="xclaw-grid">
       <div class="xclaw-card">
@@ -201,7 +201,7 @@ title: XCodeClaw - AI 学术助手
 
 </div>
 
-<style scoped>
+<style>
 .xclaw-page { max-width: 100vw; overflow-x: hidden; }
 
 /* Hero */
@@ -209,13 +209,16 @@ title: XCodeClaw - AI 学术助手
   position: relative; background: #0f1629; color: #f1f5f9;
   text-align: center; overflow: hidden; margin: -24px -24px 0;
 }
-.xclaw-hero-bg { width: 100%; display: block; opacity: 0.6; }
+.xclaw-hero-bg {
+  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+  object-fit: cover; opacity: 0.6;
+}
 .xclaw-hero-overlay {
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  position: relative;
   background: linear-gradient(180deg, rgba(15,22,41,0.3) 0%, rgba(15,22,41,0.85) 70%, rgba(15,22,41,1) 100%);
   display: flex; align-items: center; justify-content: center;
 }
-.xclaw-hero-inner { position: relative; z-index: 1; max-width: 800px; padding: 60px 24px; }
+.xclaw-hero-inner { position: relative; z-index: 1; max-width: 800px; padding: 80px 24px; }
 .xclaw-badge {
   display: inline-block; background: rgba(43,92,230,0.2); border: 1px solid rgba(43,92,230,0.4);
   border-radius: 20px; padding: 6px 20px; font-size: 0.85em; color: #FDBA74;
@@ -298,7 +301,7 @@ title: XCodeClaw - AI 学术助手
 .xclaw-compare tr:last-child td { border-bottom: none; }
 .xclaw-compare tr:nth-child(even) { background: var(--vp-c-bg-soft); }
 .xc-yes { color: #16A34A; font-weight: 700; }
-.xc-no { color: #d1d5db; }
+.xc-no { color: #ef4444; }
 
 /* Steps */
 .xclaw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }