feat: 在 AI 赋能开发页面直接阅读教程

.markdownlint-cli2.yaml

@@ -14,6 +14,7 @@ config:
       - EventCenter
       - EventDetails
       - MaterialResourceList
+      - PdfReader
       - ProgrammingLanguageNav
       - XingshuCampusMap
       - a

docs/.vitepress/theme/components/PdfReader.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { withBase } from 'vitepress';
+
+const props = withDefaults(
+  defineProps<{
+    src: string;
+    title: string;
+    downloadName: string;
+    pages: number;
+    loading?: 'eager' | 'lazy';
+  }>(),
+  { loading: 'lazy' },
+);
+
+const fileUrl = computed(() => withBase(props.src));
+const readerUrl = computed(() => `${fileUrl.value}#page=1&view=FitH&navpanes=0`);
+</script>
+
+<template>
+  <div class="pdf-reader">
+    <div class="pdf-reader__actions">
+      <span>PDF · {{ pages }} 页</span>
+      <a :href="fileUrl" :download="downloadName" :aria-label="`下载《${title}》PDF`"> 下载 PDF </a>
+    </div>
+    <iframe class="pdf-reader__frame" :src="readerUrl" :title="title" :loading="loading" />
+  </div>
+</template>
+
+<style scoped>
+.pdf-reader {
+  margin: 24px 0 40px;
+}
+
+.pdf-reader__actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 10px;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+}
+
+.pdf-reader__frame {
+  display: block;
+  width: 100%;
+  height: clamp(520px, 82vh, 1080px);
+  border: 1px solid var(--vp-c-divider);
+  background: #faf9f6;
+}
+
+@media (max-width: 640px) {
+  .pdf-reader__frame {
+    height: 75svh;
+    min-height: 480px;
+  }
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -25,6 +25,10 @@ export default {
     app.component('EventDetails', EventDetails);
     app.component('MaterialResourceList', MaterialResourceList);
     app.component('ProgrammingLanguageNav', ProgrammingLanguageNav);
+    app.component(
+      'PdfReader',
+      defineAsyncComponent(() => import('./components/PdfReader.vue')),
+    );
     app.component(
       'XingshuCampusMap',
       defineAsyncComponent(() => import('./components/XingshuCampusMap.vue')),

docs/development/ai.md

@@ -37,16 +37,23 @@ sources:
 
 介绍 Transformer、代码生成、Agent 与 Harness 的技术背景。
 
-[在线阅读（PDF，12 页）](/development/vibe-coding-prologue.pdf)
-
-<a href="/development/vibe-coding-prologue.pdf" download="Vibe Coding介绍-序章.pdf">下载 PDF</a>
+<PdfReader
+  src="/development/vibe-coding-prologue.pdf"
+  title="Vibe Coding 介绍 · 序章"
+  download-name="Vibe Coding介绍-序章.pdf"
+  :pages="12"
+  loading="eager"
+/>
 
 ## Vibe Coding 介绍 · 装上你的第一个Agent
 
 从 CLI、TUI、GUI 的区别入手，介绍 Claude Code、Codex、Google Antigravity 和 DeepSeek Harness 的安装、前置要求与 CLI 使用，并附 Magpie、CC Switch 的第三方供应商配置步骤。
 
 以 Windows 为主，补充 macOS 与 Linux 的安装入口。资料核对日期：2026 年 10 月 17 日。
 
-[在线阅读（PDF，24 页）](/development/vibe-coding-first-agent.pdf)
-
-<a href="/development/vibe-coding-first-agent.pdf" download="Vibe Coding 介绍 · 装上你的第一个Agent.pdf">下载 PDF</a>
+<PdfReader
+  src="/development/vibe-coding-first-agent.pdf"
+  title="Vibe Coding 介绍 · 装上你的第一个Agent"
+  download-name="Vibe Coding 介绍 · 装上你的第一个Agent.pdf"
+  :pages="24"
+/>