feat: add interactive demos for AI history, Auth design, and Git intro

docs/.vitepress/theme/components/appendix/auth-design/AuthEvolutionDemo.vue

@@ -1,415 +1,256 @@
 <!--
   AuthEvolutionDemo.vue
-  鉴权方案演进史演示
+  鉴权方案演进（更可用：给出“什么时候用”）
 -->
 <template>
   <div class="auth-evolution-demo">
     <div class="header">
-      <div class="title">鉴权方案演进史</div>
-      <div class="subtitle">从 HTTP Basic 到现代 JWT 的技术演进</div>
+      <div class="title">🧭 鉴权方案演进：从 Basic 到 OAuth2</div>
+      <div class="subtitle">点击卡片，快速建立“场景 → 方案”的直觉。</div>
     </div>
 
     <div class="timeline">
-      <div
-        v-for="(era, index) in eras"
-        :key="era.key"
-        class="era-item"
-        :class="{ active: selectedEra === era.key }"
-        @click="selectEra(era.key)"
+      <button
+        v-for="s in stages"
+        :key="s.id"
+        class="stage"
+        :class="{ active: activeId === s.id }"
+        @click="activeId = s.id"
       >
-        <div class="era-marker">{{ index + 1 }}</div>
-        <div class="era-content">
-          <div class="era-title">{{ era.title }}</div>
-          <div class="era-year">{{ era.year }}</div>
+        <div class="stage-top">
+          <span class="icon">{{ s.icon }}</span>
+          <span class="name">{{ s.name }}</span>
         </div>
-      </div>
+        <div class="stage-sub">{{ s.when }}</div>
+      </button>
     </div>
 
-    <div class="era-details" v-if="currentEra">
-      <div class="era-header">
-        <h3>{{ currentEra.title }}</h3>
-        <span class="era-badge">{{ currentEra.year }}</span>
-      </div>
+    <div class="card">
+      <div class="card-title">{{ active.icon }} {{ active.name }}</div>
+      <div class="desc">{{ active.desc }}</div>
 
-      <div class="era-description">
-        {{ currentEra.description }}
-      </div>
-
-      <div class="era-flow" v-if="currentEra.flow">
-        <div class="flow-title">工作流程</div>
-        <div class="flow-steps">
-          <div
-            v-for="(step, idx) in currentEra.flow"
-            :key="idx"
-            class="flow-step"
-          >
-            <div class="step-number">{{ idx + 1 }}</div>
-            <div class="step-content">{{ step }}</div>
-            <div v-if="idx < currentEra.flow.length - 1" class="step-arrow">
-              →
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="era-pros-cons">
-        <div class="pros">
-          <div class="list-title">优点</div>
-          <ul>
-            <li v-for="(pro, idx) in currentEra.pros" :key="idx">{{ pro }}</li>
+      <div class="grid">
+        <div class="box">
+          <div class="box-title">✅ 适合</div>
+          <ul class="list">
+            <li v-for="(x, i) in active.pros" :key="i">{{ x }}</li>
           </ul>
         </div>
-        <div class="cons">
-          <div class="list-title">缺点</div>
-          <ul>
-            <li v-for="(con, idx) in currentEra.cons" :key="idx">{{ con }}</li>
+        <div class="box">
+          <div class="box-title">⚠️ 主要风险</div>
+          <ul class="list">
+            <li v-for="(x, i) in active.cons" :key="i">{{ x }}</li>
           </ul>
         </div>
       </div>
 
-      <div class="era-usecase">
-        <div class="usecase-title">适用场景</div>
-        <div class="usecase-content">{{ currentEra.usecase }}</div>
-      </div>
+      <pre class="code"><code>{{ active.example }}</code></pre>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 
-const selectedEra = ref('basic')
-
-const eras = [
+const stages = [
   {
-    key: 'basic',
-    title: 'HTTP Basic Authentication',
-    year: '1990s',
-    description:
-      '最古老的鉴权方案，直接把用户名密码经过 Base64 编码后放在 HTTP 头中。虽然简单，但因为安全性问题已不推荐使用。',
-    flow: [
-      '客户端发送用户名密码',
-      '服务器验证身份',
-      '返回受保护资源',
-      '每次请求都携带密码'
-    ],
-    pros: ['实现简单，所有浏览器都支持', '标准化协议', '无需额外存储'],
-    cons: [
-      'Base64 可解码，相当于明文传输',
-      '每次请求都要传密码，容易被截获',
-      '无法主动注销（除非关闭浏览器）',
-      '无法防止 CSRF 攻击'
-    ],
-    usecase: '只适合内部测试工具，绝不用于生产环境'
+    id: 'basic',
+    icon: '🪪',
+    name: 'HTTP Basic',
+    when: '内部工具/调试',
+    desc: '最早期的方案：每次请求都带 username/password（或等价凭证）。',
+    pros: ['实现最简单', '不需要额外存储'],
+    cons: ['每次请求都带“高价值凭证”', '不适合公网生产', '很难做细粒度授权'],
+    example: `GET /api/profile
+Authorization: Basic <base64(username:password)>`
   },
   {
-    key: 'session',
-    title: 'Session + Cookie',
-    year: '2000s',
-    description:
-      'Web 开发的经典方案。服务器验证用户身份后创建 Session，返回 Session ID 给客户端，客户端每次请求自动带上 Cookie。',
-    flow: [
-      '用户登录提交用户名密码',
-      '服务器验证并创建 Session',
-      '返回 Set-Cookie: session_id',
-      '后续请求自动带上 Cookie'
-    ],
-    pros: [
-      '简单直观，易于理解',
-      '服务端可以主动注销（删除 Session）',
-      'Session 信息存储在服务端，相对安全'
-    ],
+    id: 'session',
+    icon: '🍪',
+    name: 'Session + Cookie',
+    when: '传统 Web / SSR',
+    desc: '服务端存 Session，浏览器存 cookie(session_id)。后续请求自动带 Cookie。',
+    pros: ['服务端可主动注销', '很适合同域 SSR', '工程落地成熟'],
     cons: [
-      '服务器有状态，需要存储 Session',
-      '多台服务器需要共享 Session（如 Redis）',
-      '跨域困难，Cookie 默认不能跨域',
-      '容易受到 CSRF 攻击'
+      '服务端有状态，需要共享/扩展',
+      'CSRF 风险更高（必须防）',
+      '跨域更麻烦'
     ],
-    usecase: '适合传统 Web 应用（服务器端渲染），不适合移动端和现代 SPA'
+    example: `POST /login
+→ Set-Cookie: session_id=abc; HttpOnly; Secure; SameSite=Lax
+
+GET /api/profile
+Cookie: session_id=abc`
   },
   {
-    key: 'jwt',
-    title: 'JWT (JSON Web Token)',
-    year: '2010s',
-    description:
-      '现代 Web 的主流方案。不在服务端存储状态，把用户信息加密成 Token，放在客户端。JWT 由 Header、Payload、Signature 三部分组成。',
-    flow: [
-      '用户登录验证身份',
-      '服务器生成 JWT Token',
-      '客户端存储 Token（localStorage）',
-      '后续请求在 Header 中携带 Token'
+    id: 'jwt',
+    icon: '🎫',
+    name: 'JWT Access Token',
+    when: 'API / 移动端 / 多服务',
+    desc: '服务端不存状态，把声明编码为 token；请求携带 Authorization: Bearer。',
+    pros: ['无状态易扩展', '跨域友好', '多服务常用'],
+    cons: [
+      '难以全局注销（要额外机制）',
+      'token 体积大',
+      'payload 可读（别放敏感信息）'
     ],
+    example: `GET /api/profile
+Authorization: Bearer <access_token>`
+  },
+  {
+    id: 'oauth2',
+    icon: '🔑',
+    name: 'OAuth2 / OIDC',
+    when: '第三方登录/授权',
+    desc: '解决“第三方授权/登录”，让应用无需保存第三方账号密码。',
     pros: [
-      '无状态，服务端不存储 Session',
-      '易于横向扩展',
-      '跨域友好，不受 Cookie 限制',
-      '移动端友好，原生 App 也能轻松使用',
-      'Payload 可以存储用户信息、权限等'
+      '用户体验好（扫码/一键登录）',
+      '安全边界更清晰',
+      '可扩展到 OIDC（登录）'
     ],
     cons: [
-      '无法主动注销，Token 一旦签发在过期前一直有效',
-      'Payload 可见（Base64 编码），不能存敏感信息',
-      'Token 过大，每次请求都要带上',
-      '需要额外的黑名单机制实现注销'
+      '接入复杂度更高',
+      '必须正确处理 redirect_uri/state',
+      'token 生命周期设计很关键'
     ],
-    usecase: '现代 Web 和移动端的标准方案，特别适合分布式系统和微服务架构'
+    example: `GET /authorize?response_type=code&client_id=...&redirect_uri=...&state=...`
   }
 ]
 
-const currentEra = computed(() => eras.find((e) => e.key === selectedEra.value))
-
-const selectEra = (key) => {
-  selectedEra.value = key
-}
+const activeId = ref(stages[1].id)
+const active = computed(
+  () => stages.find((s) => s.id === activeId.value) || stages[0]
+)
 </script>
 
 <style scoped>
 .auth-evolution-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 12px;
+  border-radius: 8px;
   padding: 1.5rem;
-  margin: 1.5rem 0;
-  font-family: var(--vp-font-family-base);
+  margin: 1rem 0;
 }
 
 .header {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .title {
-  font-weight: 700;
-  font-size: 1.1rem;
-  margin-bottom: 0.3rem;
+  font-weight: 800;
+  color: var(--vp-c-text-1);
 }
 
 .subtitle {
+  margin-top: 0.25rem;
   color: var(--vp-c-text-2);
   font-size: 0.9rem;
 }
 
 .timeline {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-  overflow-x: auto;
-  padding-bottom: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+  margin: 1rem 0;
 }
 
-.era-item {
-  flex: 1;
-  min-width: 180px;
-  padding: 1rem;
+.stage {
+  text-align: left;
+  padding: 0.75rem;
+  border-radius: 8px;
   border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
   background: var(--vp-c-bg);
   cursor: pointer;
-  transition: all 0.2s ease;
+}
+
+.stage.active {
+  border-color: rgba(var(--vp-c-brand-rgb), 0.35);
+  box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.12);
+}
+
+.stage-top {
   display: flex;
+  gap: 0.5rem;
   align-items: center;
-  gap: 0.75rem;
+  margin-bottom: 0.25rem;
 }
 
-.era-item:hover {
-  border-color: var(--vp-c-brand);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.era-item.active {
-  border-color: var(--vp-c-brand);
-  background: rgba(59, 130, 246, 0.1);
-}
-
-.era-marker {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: var(--vp-c-brand);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 0.9rem;
-  flex-shrink: 0;
-}
-
-.era-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.era-title {
-  font-weight: 600;
-  font-size: 0.9rem;
-  margin-bottom: 0.2rem;
-}
-
-.era-year {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-}
-
-.era-details {
-  background: var(--vp-c-bg);
-  border-radius: 10px;
-  padding: 1.25rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.era-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  gap: 1rem;
-}
-
-.era-header h3 {
-  margin: 0;
+.icon {
   font-size: 1.1rem;
-  font-weight: 700;
 }
 
-.era-badge {
-  background: var(--vp-c-brand);
-  color: white;
-  padding: 0.25rem 0.75rem;
-  border-radius: 6px;
-  font-size: 0.85rem;
-  font-weight: 600;
+.name {
+  font-weight: 800;
+  color: var(--vp-c-text-1);
 }
 
-.era-description {
+.stage-sub {
   color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin-bottom: 1.25rem;
-}
-
-.era-flow {
-  margin-bottom: 1.25rem;
-}
-
-.flow-title {
-  font-weight: 600;
-  margin-bottom: 0.75rem;
-  font-size: 0.95rem;
-}
-
-.flow-steps {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.flow-step {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.step-number {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: var(--vp-c-brand);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.step-content {
-  background: var(--vp-c-bg-soft);
-  padding: 0.4rem 0.75rem;
-  border-radius: 6px;
   font-size: 0.85rem;
+  line-height: 1.4;
+}
+
+.card {
+  background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-}
-
-.step-arrow {
-  color: var(--vp-c-text-2);
-  font-weight: 600;
-}
-
-.era-pros-cons {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1rem;
-  margin-bottom: 1.25rem;
-}
-
-.pros,
-.cons {
-  background: var(--vp-c-bg-soft);
   border-radius: 8px;
   padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
 }
 
-.list-title {
-  font-weight: 600;
+.card-title {
+  font-weight: 800;
   margin-bottom: 0.5rem;
-  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
 }
 
-.pros ul {
-  margin: 0;
-  padding-left: 1.25rem;
-}
-
-.pros li {
-  margin-bottom: 0.4rem;
-  font-size: 0.85rem;
-  color: #16a34a;
-}
-
-.cons ul {
-  margin: 0;
-  padding-left: 1.25rem;
-}
-
-.cons li {
-  margin-bottom: 0.4rem;
-  font-size: 0.85rem;
-  color: #ef4444;
-}
-
-.era-usecase {
-  background: rgba(59, 130, 246, 0.1);
-  border-left: 3px solid var(--vp-c-brand);
-  padding: 0.75rem 1rem;
-  border-radius: 6px;
-}
-
-.usecase-title {
-  font-weight: 600;
-  margin-bottom: 0.4rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-brand);
-}
-
-.usecase-content {
-  font-size: 0.85rem;
+.desc {
   color: var(--vp-c-text-2);
-  line-height: 1.5;
+  line-height: 1.75;
+  margin-bottom: 0.75rem;
 }
 
-@media (max-width: 768px) {
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.box {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-alt);
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.box-title {
+  font-weight: 800;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+}
+
+.list {
+  margin: 0;
+  padding-left: 1.1rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.75;
+}
+
+.code {
+  margin: 0;
+  padding: 0.75rem;
+  border-radius: 6px;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  overflow-x: auto;
+  color: var(--vp-c-text-1);
+}
+
+@media (max-width: 720px) {
   .timeline {
-    flex-direction: column;
+    grid-template-columns: 1fr;
   }
-
-  .era-item {
-    min-width: auto;
-  }
-
-  .era-pros-cons {
+  .grid {
     grid-template-columns: 1fr;
   }
 }