feat: 更新附录交互组件和文档

2026-02-24 00:18:09 +08:00
parent d45df3cda5
commit 94f9db0834
88 changed files with 11797 additions and 7634 deletions
@@ -5,7 +5,7 @@
        🌟 AI 发展阶段与核心范式全景对比
      </div>
      <div class="era-grid">
-        <div class="era-item" v-for="era in eras" :key="era.name" :style="{ borderTopColor: era.color }">
+        <div v-for="era in eras" :key="era.name" class="era-item" :style="{ borderTopColor: era.color }">
          <div class="e-icon" :style="{ background: era.color }">{{ era.icon }}</div>
          <div class="e-name" :style="{ color: era.color }">{{ era.name }}</div>
          <div class="e-time">{{ era.time }}</div>
@@ -25,7 +25,7 @@
          <div class="e-section">
            <div class="e-label">典型代表</div>
            <div class="e-tags">
-              <span class="e-tag" v-for="tag in era.examples" :key="tag">{{ tag }}</span>
+              <span v-for="tag in era.examples" :key="tag" class="e-tag">{{ tag }}</span>
            </div>
          </div>
        </div>
@@ -1,7 +1,7 @@
 <template>
  <div class="demo-card">
    <div class="timeline-visual">
-      <div class="era" v-for="era in eras" :key="era.label" :style="{ flex: era.flex, background: era.bg }">
+      <div v-for="era in eras" :key="era.label" class="era" :style="{ flex: era.flex, background: era.bg }">
        <div class="era-label">{{ era.label }}</div>
        <div class="era-years">{{ era.years }}</div>
      </div>
@@ -8,7 +8,7 @@
        </div>
      </div>
      <div class="bars-col">
-        <div class="attention-item" v-for="(item, i) in weights" :key="i">
+        <div v-for="(item, i) in weights" :key="i" class="attention-item">
          <span class="bar-word" :class="{ focus: i === focusIdx }">{{ item.word }}</span>
          <div class="bar-bg">
            <div class="bar-fill" :style="{ width: item.w * 100 + '%', background: barColor(item.w) }"></div>
@@ -1,7 +1,7 @@
 <template>
  <div class="demo-card">
    <div class="bp-flow">
-      <div class="step-block" v-for="(step, i) in steps" :key="i" :style="{ borderTopColor: step.color }">
+      <div v-for="(step, i) in steps" :key="i" class="step-block" :style="{ borderTopColor: step.color }">
        <div class="step-num" :style="{ background: step.color }">{{ i + 1 }}</div>
        <div class="step-icon">{{ step.icon }}</div>
        <div class="step-name">{{ step.name }}</div>
@@ -1,7 +1,7 @@
 <template>
  <div class="demo-card">
    <div class="schools-grid">
-      <div class="school-card" v-for="s in schools" :key="s.name" :style="{ borderTopColor: s.color }">
+      <div v-for="s in schools" :key="s.name" class="school-card" :style="{ borderTopColor: s.color }">
        <div class="card-head">
          <span class="school-icon">{{ s.icon }}</span>
          <span class="school-name" :style="{ color: s.color }">{{ s.name }}</span>
@@ -1,7 +1,7 @@
 <template>
  <div class="demo-card">
    <div class="gpt-grid">
-      <div class="gpt-card" v-for="m in models" :key="m.name" :style="{ borderTopColor: m.color }">
+      <div v-for="m in models" :key="m.name" class="gpt-card" :style="{ borderTopColor: m.color }">
        <div class="card-top">
          <span class="gpt-name" :style="{ color: m.color }">{{ m.name }}</span>
          <span class="gpt-year">{{ m.year }}</span>
@@ -11,7 +11,7 @@
        </svg>
      </div>
      <div class="layer-cards">
-        <div class="layer-card" v-for="info in layerInfo" :key="info.name" :style="{ borderLeftColor: info.color }">
+        <div v-for="info in layerInfo" :key="info.name" class="layer-card" :style="{ borderLeftColor: info.color }">
          <div class="lc-title" :style="{ color: info.color }">{{ info.name }}</div>
          <div class="lc-desc">{{ info.desc }}</div>
        </div>
@@ -2,13 +2,13 @@
  <div class="demo-card">
    <div class="perceptron-layout">
      <div class="inputs-col">
-        <div class="input-node" v-for="inp in inputs" :key="inp.label">
+        <div v-for="inp in inputs" :key="inp.label" class="input-node">
          <span class="node-circle">{{ inp.val }}</span>
          <span class="node-label">{{ inp.label }}</span>
        </div>
      </div>
      <div class="weights-col">
-        <div class="weight-arrow" v-for="inp in inputs" :key="inp.label">
+        <div v-for="inp in inputs" :key="inp.label" class="weight-arrow">
          <span class="arrow">→</span>
          <span class="w-tag">×{{ inp.weight }}</span>
        </div>
@@ -4,7 +4,7 @@
      <span class="title">关键发展路径总结</span>
    </div>
    <div class="path-flow">
-      <div class="path-item" v-for="(item, i) in path" :key="i">
+      <div v-for="(item, i) in path" :key="i" class="path-item">
        <div class="path-card" :style="{ borderLeftColor: item.color }">
          <div class="path-top">
            <span class="path-icon" :style="{ background: item.color }">{{ i + 1 }}</span>