feat(docs): add NavGrid/NavCard components and restructure stage pages
- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
This commit is contained in:
sanbuphy
+149
-237
@@ -1,305 +1,217 @@
|
||||
<template>
|
||||
<div class="ai-evolution-timeline-demo">
|
||||
<div class="timeline-container">
|
||||
<div class="timeline-track"></div>
|
||||
<el-card shadow="hover" class="main-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>AI 进化时间轴</h3>
|
||||
<p class="subtitle">点击不同时期，查看 AI 是如何一步步进化的</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-for="(era, index) in eras"
|
||||
:key="index"
|
||||
class="timeline-era"
|
||||
:class="{ active: activeEra === index }"
|
||||
@click="activeEra = index"
|
||||
>
|
||||
<div class="era-marker">
|
||||
<div class="marker-dot"></div>
|
||||
<div class="marker-line"></div>
|
||||
</div>
|
||||
<div class="era-content">
|
||||
<div class="era-year">{{ era.year }}</div>
|
||||
<div class="era-title">{{ era.title }}</div>
|
||||
<div class="era-desc">{{ era.desc }}</div>
|
||||
<div class="era-examples">
|
||||
<span
|
||||
v-for="(example, i) in era.examples"
|
||||
:key="i"
|
||||
class="example-tag"
|
||||
>
|
||||
{{ example }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-content">
|
||||
<el-tabs v-model="activeEraName" type="border-card" class="timeline-tabs">
|
||||
<el-tab-pane
|
||||
v-for="(era, index) in eras"
|
||||
:key="index"
|
||||
:label="era.title"
|
||||
:name="era.title"
|
||||
>
|
||||
<div class="era-content">
|
||||
<div class="era-header">
|
||||
<el-tag effect="dark" size="large" class="year-tag">{{ era.year }}</el-tag>
|
||||
<span class="era-desc-short">{{ era.desc }}</span>
|
||||
</div>
|
||||
|
||||
<div class="era-body">
|
||||
<p class="full-desc">{{ era.fullDesc }}</p>
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-column">
|
||||
<span class="column-title">💡 核心特点</span>
|
||||
<ul class="key-points-list">
|
||||
<li v-for="(point, i) in era.keyPoints" :key="i">
|
||||
<el-icon class="point-icon"><CaretRight /></el-icon>
|
||||
{{ point }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-column">
|
||||
<span class="column-title">🌟 代表成就</span>
|
||||
<div class="examples-container">
|
||||
<el-tag
|
||||
v-for="(example, i) in era.examples"
|
||||
:key="i"
|
||||
class="example-tag"
|
||||
effect="plain"
|
||||
>
|
||||
{{ example }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Era Details Panel -->
|
||||
<transition name="fade">
|
||||
<div v-if="activeEra !== null" class="era-details">
|
||||
<div class="details-header">
|
||||
<h4>{{ eras[activeEra].title }}</h4>
|
||||
<span class="year-badge">{{ eras[activeEra].year }}</span>
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<p>{{ eras[activeEra].fullDesc }}</p>
|
||||
<div class="key-points">
|
||||
<h5>核心特点：</h5>
|
||||
<ul>
|
||||
<li v-for="(point, i) in eras[activeEra].keyPoints" :key="i">
|
||||
{{ point }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { CaretRight } from '@element-plus/icons-vue'
|
||||
|
||||
const activeEra = ref(0)
|
||||
const activeEraName = ref('符号主义时代')
|
||||
|
||||
const eras = ref([
|
||||
const eras = [
|
||||
{
|
||||
year: '20世纪50-80年代',
|
||||
title: '符号主义时代',
|
||||
desc: '规则与逻辑推理',
|
||||
fullDesc: '早期人工智能研究认为，智能可以通过符号和逻辑规则来表达。科学家们尝试编写大量规则来让机器模拟人类专家的决策过程。',
|
||||
examples: ['专家系统', '深蓝', 'MYCIN'],
|
||||
fullDesc:
|
||||
'早期人工智能研究认为，智能可以通过符号和逻辑规则来表达。科学家们尝试编写大量规则来让机器模拟人类专家的决策过程。',
|
||||
examples: ['专家系统', '深蓝 (Deep Blue)', 'MYCIN'],
|
||||
keyPoints: [
|
||||
'人工编写 If-Then 规则',
|
||||
'逻辑推理能力强大',
|
||||
'可解释性强',
|
||||
'无法处理复杂现实世界',
|
||||
'容易遇到组合爆炸问题'
|
||||
'难以处理模糊/复杂问题'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: '21世纪10年代',
|
||||
title: '连接主义时代',
|
||||
desc: '神经网络与深度学习',
|
||||
fullDesc: '随着大数据和 GPU 算力的突破，深度学习迎来了春天。神经网络通过多层结构自动学习特征，在图像识别、语音识别等领域取得巨大成功。',
|
||||
fullDesc:
|
||||
'随着大数据和 GPU 算力的突破，深度学习迎来了春天。神经网络通过多层结构自动学习特征，在图像识别、语音识别等领域取得巨大成功。',
|
||||
examples: ['AlexNet', 'AlphaGo', '人脸识别'],
|
||||
keyPoints: [
|
||||
'模仿人脑神经元结构',
|
||||
'从数据中自动学习',
|
||||
'从数据中自动学习特征',
|
||||
'强大的模式识别能力',
|
||||
'需要海量标注数据',
|
||||
'黑盒模型，缺乏可解释性'
|
||||
'模型是"黑盒"，缺乏可解释性'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: '21世纪20年代至今',
|
||||
title: '生成式人工智能时代',
|
||||
title: '生成式 AI 时代',
|
||||
desc: '大模型与创造力',
|
||||
fullDesc: 'Transformer 架构的诞生让机器理解了上下文关系。GPT 等大语言模型不仅能生成文本、图像，还展现出了惊人的推理和创造能力。',
|
||||
examples: ['ChatGPT', 'Midjourney', 'GPT-4'],
|
||||
fullDesc:
|
||||
'Transformer 架构的诞生让机器理解了上下文关系。GPT 等大语言模型不仅能生成文本、图像，还展现出了惊人的推理和创造能力。',
|
||||
examples: ['ChatGPT', 'Midjourney', 'Sora'],
|
||||
keyPoints: [
|
||||
'基于注意力机制',
|
||||
'理解上下文和语义',
|
||||
'能生成新内容',
|
||||
'通用智能雏形',
|
||||
'存在幻觉和偏见问题'
|
||||
'基于 Transformer 架构',
|
||||
'通用的理解与生成能力',
|
||||
'涌现出推理、规划等高级智能',
|
||||
'通过提示词 (Prompt) 交互'
|
||||
]
|
||||
}
|
||||
])
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ai-evolution-timeline-demo {
|
||||
margin: 1rem 0;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
padding: 2rem 0;
|
||||
.main-card {
|
||||
/* Compact card style */
|
||||
}
|
||||
|
||||
.timeline-track {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--vp-c-divider);
|
||||
border-radius: 2px;
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.timeline-era {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.timeline-era:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.timeline-era.active .era-marker .marker-dot {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.era-marker {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.marker-dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--vp-c-divider);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.marker-line {
|
||||
flex: 1;
|
||||
width: 2px;
|
||||
background: var(--vp-c-divider);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.timeline-era:last-child .marker-line {
|
||||
display: none;
|
||||
.timeline-tabs {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.era-content {
|
||||
margin-left: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
transition: all 0.3s ease;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.era-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.era-desc-short {
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.full-desc {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
background: #f5f7fa;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.timeline-era.active .era-content {
|
||||
border-color: var(--vp-c-brand);
|
||||
box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.12);
|
||||
.column-title {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #909399;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.era-year {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.25rem;
|
||||
.key-points-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.era-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--vp-c-text-1);
|
||||
.key-points-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.era-desc {
|
||||
font-size: 0.875rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
.point-icon {
|
||||
margin-right: 5px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.era-examples {
|
||||
.examples-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.example-tag {
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
@media (max-width: 600px) {
|
||||
.info-grid {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.era-details {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.details-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.details-header h4 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.year-badge {
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.12);
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.2);
|
||||
color: var(--vp-c-brand);
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.details-content p {
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.key-points {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.key-points h5 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.key-points ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.key-points li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.6;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user