feat: 添加新用户上手指引页面，首页按钮改为 XCodeClaw

- 新增 docs/guide/trial-guide.md（从 HTML 转为 VitePress 格式） - 侧边栏添加「新用户上手指引」条目 - feishu-bot 配置完成提示中添加上手指引链接 - 首页按钮文字 OpenClaw → XCodeClaw Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-10 11:53:14 +08:00
parent 2dfc1b9729
commit d6b71fee99
4 changed files with 382 additions and 1 deletions
--- a/docs/guide/feishu-bot.md
+++ b/docs/guide/feishu-bot.md
@@ -222,6 +222,8 @@ App Secret 是应用的密钥，请妥善保管，不要在公开场合泄露。

 :::tip 配置完成 🎉
 应用发布后，在飞书中搜索您创建的机器人名称，发送任意消息即可开始使用。
+
+👉 不知道从哪开始？查看 [新用户上手指引](/guide/trial-guide)，5 分钟体验完整学术工作流。
 :::

 ## 9. 授权飞书资源访问
--- a/docs/guide/trial-guide.md
+++ b/docs/guide/trial-guide.md
@@ -0,0 +1,378 @@
+---
+title: XCodeClaw 新用户上手指引
+---
+
+<script setup>
+import { ref } from 'vue'
+
+const copiedId = ref(null)
+
+function copyPrompt(id, text) {
+  navigator.clipboard.writeText(text).then(() => {
+    copiedId.value = id
+    setTimeout(() => { copiedId.value = null }, 2000)
+  })
+}
+</script>
+
+# XCodeClaw 新用户上手指引
+
+5 分钟体验完整学术工作流：文献检索 → 综述撰写 → AI 配图 → LaTeX 排版
+
+## 第一步：认识你的学术助手
+
+打开飞书，找到你的机器人（管理员创建时会告诉你名字），发送第一条消息——**介绍一下自己**。
+
+<div class="tg-chat">
+  <div class="tg-chat-msg">
+    <div class="tg-chat-avatar tg-user">你</div>
+    <div class="tg-chat-bubble">你好！我叫李明，是材料科学与工程专业的硕士研究生，研究方向是钙钛矿太阳能电池的稳定性优化。</div>
+  </div>
+  <div class="tg-chat-msg">
+    <div class="tg-chat-avatar tg-bot">🦞</div>
+    <div class="tg-chat-bubble tg-bot-bubble">你好李明！我是学术龙虾🦞，你的专属 AI 科研助手。很高兴认识你！<br><br>钙钛矿太阳能电池是个非常热门的研究方向，我可以帮你进行文献检索、论文写作、数据分析和图表制作。需要我帮你做什么？</div>
+  </div>
+</div>
+
+:::tip 为什么要先自我介绍？
+AI 会根据你的专业背景调整回答的深度和术语使用。介绍越具体，后续对话越精准。建议包含：**姓名、专业方向、当前研究课题**。
+:::
+
+## 第二步：体验文献检索
+
+告诉龙虾你想了解的研究主题，它会自动检索学术论文数据库并联网搜索最新进展。
+
+<div class="tg-prompt-box">
+  <div class="tg-prompt-label">试试发送</div>
+  <div class="tg-prompt-text">帮我检索一下「钙钛矿太阳能电池稳定性」的最新研究进展，找 10 篇高引用论文。</div>
+  <button class="tg-copy-btn" @click="copyPrompt('p1', '帮我检索一下「钙钛矿太阳能电池稳定性」的最新研究进展，找 10 篇高引用论文。')">{{ copiedId === 'p1' ? '已复制' : '复制' }}</button>
+</div>
+
+龙虾会做两件事：
+
+<div class="tg-feature-grid">
+  <div class="tg-feature-card">
+    <div class="tg-feature-icon" style="background: rgba(43,92,230,0.1); color: #2B5CE6;">📚</div>
+    <h4>学术论文检索</h4>
+    <p>通过 OpenAlex 搜索学术论文，返回标题、作者、引用量、DOI、摘要等结构化信息。</p>
+  </div>
+  <div class="tg-feature-card">
+    <div class="tg-feature-icon" style="background: rgba(249,115,22,0.1); color: #F97316;">🌐</div>
+    <h4>Tavily 联网搜索</h4>
+    <p>实时搜索最新学术动态、综述报告和前沿趋势，补充论文数据库尚未收录的内容。</p>
+  </div>
+</div>
+
+## 第三步：撰写文献综述
+
+检索完成后，让龙虾帮你把论文整理成一篇结构化的文献综述。
+
+<div class="tg-prompt-box">
+  <div class="tg-prompt-label">试试发送</div>
+  <div class="tg-prompt-text">根据检索到的论文，帮我写一篇关于「钙钛矿太阳能电池稳定性优化策略」的文献综述，要求：
+1. 按研究主题分类（如界面工程、封装技术、组分优化等）
+2. 每篇引用的论文要标注作者、年份和 DOI
+3. 最后总结当前研究的不足和未来方向</div>
+  <button class="tg-copy-btn" @click="copyPrompt('p2', `根据检索到的论文，帮我写一篇关于「钙钛矿太阳能电池稳定性优化策略」的文献综述，要求：\n1. 按研究主题分类（如界面工程、封装技术、组分优化等）\n2. 每篇引用的论文要标注作者、年份和 DOI\n3. 最后总结当前研究的不足和未来方向`)">{{ copiedId === 'p2' ? '已复制' : '复制' }}</button>
+</div>
+
+龙虾会生成一篇带有**规范学术引用**的综述文稿。所有引用均来自真实论文，拒绝编造。
+
+## 第四步：AI 生成配图
+
+综述写好后，让龙虾为你生成一张与主题相关的学术插图。
+
+<div class="tg-prompt-box">
+  <div class="tg-prompt-label">试试发送</div>
+  <div class="tg-prompt-text">帮我画一张钙钛矿太阳能电池结构的示意图，要求学术风格、清晰标注各层结构，适合放在综述论文中。</div>
+  <button class="tg-copy-btn" @click="copyPrompt('p3', '帮我画一张钙钛矿太阳能电池结构的示意图，要求学术风格、清晰标注各层结构，适合放在综述论文中。')">{{ copiedId === 'p3' ? '已复制' : '复制' }}</button>
+</div>
+
+<div class="tg-feature-grid">
+  <div class="tg-feature-card">
+    <div class="tg-feature-icon" style="background: rgba(22,163,74,0.1); color: #16A34A;">🎨</div>
+    <h4>Banana 画图</h4>
+    <p>内置 Gemini 4K 画图引擎，支持流程图、结构示意图、架构图等学术插图生成。</p>
+  </div>
+  <div class="tg-feature-card">
+    <div class="tg-feature-icon" style="background: rgba(124,58,237,0.1); color: #7c3aed;">📊</div>
+    <h4>Python 数据可视化</h4>
+    <p>也可以让龙虾用 matplotlib / seaborn 绘制数据图表，直接输出高分辨率图片。</p>
+  </div>
+</div>
+
+## 第五步：LaTeX 排版输出 PDF
+
+最后一步——将综述和配图整合为专业排版的 PDF 文档。
+
+<div class="tg-prompt-box">
+  <div class="tg-prompt-label">试试发送</div>
+  <div class="tg-prompt-text">把刚才的综述整理成 LaTeX 格式，插入配图，用 xelatex 编译成 PDF 发给我。要求中文排版，使用宋体正文、黑体标题。</div>
+  <button class="tg-copy-btn" @click="copyPrompt('p4', '把刚才的综述整理成 LaTeX 格式，插入配图，用 xelatex 编译成 PDF 发给我。要求中文排版，使用宋体正文、黑体标题。')">{{ copiedId === 'p4' ? '已复制' : '复制' }}</button>
+</div>
+
+:::tip 支持的 LaTeX 功能
+预装 TeX Live 完整版 + 中文字体（宋体、黑体、微软雅黑、Noto CJK），支持 `ctex` 宏包、`biblatex` 文献管理、`tikz` 绘图等。编译完成后直接发送 PDF 文件到飞书对话。
+:::
+
+## 完整流程一览
+
+<div class="tg-flow">
+  <div class="tg-flow-step">
+    <div class="tg-flow-line">
+      <div class="tg-flow-dot tg-c1">1</div>
+      <div class="tg-flow-connector"></div>
+    </div>
+    <div class="tg-flow-content">
+      <h4>自我介绍</h4>
+      <p>告诉龙虾你的名字、专业和研究方向，建立个性化上下文。</p>
+    </div>
+  </div>
+  <div class="tg-flow-step">
+    <div class="tg-flow-line">
+      <div class="tg-flow-dot tg-c1">2</div>
+      <div class="tg-flow-connector"></div>
+    </div>
+    <div class="tg-flow-content">
+      <h4>文献检索</h4>
+      <p>学术论文数据库 + Tavily 联网搜索，获取高质量文献。</p>
+    </div>
+  </div>
+  <div class="tg-flow-step">
+    <div class="tg-flow-line">
+      <div class="tg-flow-dot tg-c2">3</div>
+      <div class="tg-flow-connector"></div>
+    </div>
+    <div class="tg-flow-content">
+      <h4>撰写综述</h4>
+      <p>结构化文献综述，规范学术引用，拒绝编造。</p>
+    </div>
+  </div>
+  <div class="tg-flow-step">
+    <div class="tg-flow-line">
+      <div class="tg-flow-dot tg-c2">4</div>
+      <div class="tg-flow-connector"></div>
+    </div>
+    <div class="tg-flow-content">
+      <h4>AI 配图</h4>
+      <p>Banana 4K 画图 / matplotlib 数据可视化，论文插图一步到位。</p>
+    </div>
+  </div>
+  <div class="tg-flow-step">
+    <div class="tg-flow-line">
+      <div class="tg-flow-dot tg-c3">5</div>
+    </div>
+    <div class="tg-flow-content">
+      <h4>LaTeX 输出 PDF</h4>
+      <p>专业中文排版，自动编译，直接发送 PDF 到飞书。</p>
+    </div>
+  </div>
+</div>
+
+## 上手后，还可以探索更多
+
+<div class="tg-feature-grid">
+  <div class="tg-feature-card">
+    <div class="tg-feature-icon" style="background: rgba(43,92,230,0.1); color: #2B5CE6;">🔬</div>
+    <h4>深度调研</h4>
+    <p>多轮检索、交叉引用分析、输出完整研究报告。</p>
+  </div>
+  <div class="tg-feature-card">
+    <div class="tg-feature-icon" style="background: rgba(249,115,22,0.1); color: #F97316;">✍️</div>
+    <h4>论文润色降重</h4>
+    <p>学术写作优化，消除 AI 痕迹，保持学术规范。</p>
+  </div>
+  <div class="tg-feature-card">
+    <div class="tg-feature-icon" style="background: rgba(22,163,74,0.1); color: #16A34A;">🧮</div>
+    <h4>科学计算</h4>
+    <p>NumPy / SciPy / pandas / scikit-learn，数据分析与统计建模。</p>
+  </div>
+  <div class="tg-feature-card">
+    <div class="tg-feature-icon" style="background: rgba(124,58,237,0.1); color: #7c3aed;">📄</div>
+    <h4>飞书文档协作</h4>
+    <p>发送 <code>/feishu auth</code> 授权后，可直接读写飞书文档和多维表格。</p>
+  </div>
+</div>
+
+:::warning 温馨提示
+首次使用建议发送 `/feishu auth` 完成飞书资源授权，解锁文档读写等高级功能。详见 [配置指南 - 授权飞书资源访问](/guide/feishu-bot#_9-授权飞书资源访问)。
+:::
+
+<style>
+/* ===== Chat Bubble ===== */
+.tg-chat {
+  background: var(--vp-c-bg-soft);
+  border-radius: 16px;
+  padding: 20px;
+  margin: 16px 0;
+}
+.tg-chat-msg {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  align-items: flex-start;
+}
+.tg-chat-msg:last-child { margin-bottom: 0; }
+.tg-chat-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1em;
+  flex-shrink: 0;
+}
+.tg-chat-avatar.tg-user { background: #2B5CE6; color: #fff; font-weight: 700; font-size: 0.85em; }
+.tg-chat-avatar.tg-bot { background: #fee2e2; }
+.tg-chat-bubble {
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 12px 16px;
+  max-width: 85%;
+  font-size: 0.93em;
+  line-height: 1.6;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+}
+.tg-chat-bubble.tg-bot-bubble {
+  background: linear-gradient(135deg, #f0f4ff, #f5f3ff);
+  border: 1px solid rgba(43,92,230,0.1);
+}
+.dark .tg-chat-bubble.tg-bot-bubble {
+  background: rgba(43,92,230,0.1);
+  border-color: rgba(43,92,230,0.2);
+}
+
+/* ===== Feature Card ===== */
+.tg-feature-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin: 20px 0;
+}
+.tg-feature-card {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 20px;
+  transition: box-shadow 0.2s;
+}
+.tg-feature-card:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+}
+.tg-feature-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.3em;
+  margin-bottom: 10px;
+}
+.tg-feature-card h4 {
+  font-size: 1em;
+  margin-bottom: 4px;
+}
+.tg-feature-card p {
+  font-size: 0.85em;
+  color: var(--vp-c-text-2);
+  margin: 0;
+}
+
+/* ===== Prompt Box ===== */
+.tg-prompt-box {
+  background: #0f1629;
+  border-radius: 12px;
+  padding: 20px 24px;
+  margin: 16px 0;
+  position: relative;
+}
+.tg-prompt-label {
+  font-size: 0.75em;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  margin-bottom: 8px;
+}
+.tg-prompt-text {
+  color: #f1f5f9;
+  font-size: 0.95em;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  font-family: "SF Mono", "Fira Code", monospace;
+}
+.tg-copy-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: rgba(255,255,255,0.1);
+  border: 1px solid rgba(255,255,255,0.15);
+  color: #94a3b8;
+  padding: 4px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.8em;
+  transition: all 0.2s;
+}
+.tg-copy-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
+
+/* ===== Step Flow ===== */
+.tg-flow {
+  display: flex;
+  flex-direction: column;
+  margin: 24px 0;
+}
+.tg-flow-step {
+  display: flex;
+  gap: 20px;
+}
+.tg-flow-line {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 48px;
+  flex-shrink: 0;
+}
+.tg-flow-dot {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 1.2em;
+  color: #fff;
+  flex-shrink: 0;
+}
+.tg-flow-dot.tg-c1 { background: linear-gradient(135deg, #2B5CE6, #7c3aed); }
+.tg-flow-dot.tg-c2 { background: linear-gradient(135deg, #F97316, #f43f5e); }
+.tg-flow-dot.tg-c3 { background: linear-gradient(135deg, #16A34A, #0ea5e9); }
+.tg-flow-connector {
+  width: 3px;
+  flex: 1;
+  background: linear-gradient(180deg, #2B5CE6, rgba(43,92,230,0.1));
+  min-height: 20px;
+}
+.tg-flow-content {
+  flex: 1;
+  padding-bottom: 32px;
+}
+.tg-flow-content h4 {
+  margin: 8px 0 6px;
+  font-size: 1.1em;
+}
+.tg-flow-content p {
+  color: var(--vp-c-text-2);
+  font-size: 0.95em;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 640px) {
+  .tg-feature-grid { grid-template-columns: 1fr; }
+  .tg-flow-step { gap: 14px; }
+  .tg-flow-line { width: 40px; }
+  .tg-flow-dot { width: 40px; height: 40px; font-size: 1em; }
+}
+</style>