sanbuphy
524 lines
12 KiB
Vue
524 lines
12 KiB
Vue
<template>
|
||
<div class="agent-future-demo">
|
||
<div class="future-intro">
|
||
<h3>🚀 Agent 的未来展望</h3>
|
||
<p>探索 Agent 技术的发展趋势和应用前景</p>
|
||
</div>
|
||
|
||
<div class="timeline">
|
||
<div class="timeline-line"></div>
|
||
|
||
<div
|
||
v-for="(era, index) in timeline"
|
||
:key="era.period"
|
||
class="timeline-item"
|
||
:class="{ active: selectedEra === index }"
|
||
@click="selectedEra = index"
|
||
>
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<div class="era-period">{{ era.period }}</div>
|
||
<div class="era-title">{{ era.title }}</div>
|
||
<div class="era-description">{{ era.description }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="era-details">
|
||
<div class="detail-card">
|
||
<h4>{{ timeline[selectedEra].title }} ({{ timeline[selectedEra].period }})</h4>
|
||
<p class="era-detail-desc">{{ timeline[selectedEra].detailDescription }}</p>
|
||
|
||
<div class="era-features">
|
||
<div class="features-title">🎯 关键特征</div>
|
||
<div class="features-list">
|
||
<div
|
||
v-for="feature in timeline[selectedEra].features"
|
||
:key="feature"
|
||
class="feature-tag"
|
||
>
|
||
{{ feature }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="era-applications">
|
||
<div class="applications-title">💼 典型应用</div>
|
||
<div class="applications-grid">
|
||
<div
|
||
v-for="app in timeline[selectedEra].applications"
|
||
:key="app.name"
|
||
class="app-item"
|
||
>
|
||
<div class="app-icon">{{ app.icon }}</div>
|
||
<div class="app-name">{{ app.name }}</div>
|
||
<div class="app-desc">{{ app.description }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="era-challenges">
|
||
<div class="challenges-title">⚠️ 面临挑战</div>
|
||
<ul>
|
||
<li v-for="challenge in timeline[selectedEra].challenges" :key="challenge">
|
||
{{ challenge }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="future-predictions">
|
||
<h4>🔮 未来预测</h4>
|
||
<div class="predictions-grid">
|
||
<div
|
||
v-for="(prediction, index) in predictions"
|
||
:key="prediction.title"
|
||
class="prediction-card"
|
||
>
|
||
<div class="prediction-icon">{{ prediction.icon }}</div>
|
||
<div class="prediction-title">{{ prediction.title }}</div>
|
||
<div class="prediction-desc">{{ prediction.description }}</div>
|
||
<div class="prediction-time">预计实现：{{ prediction.timeline }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
const selectedEra = ref(3)
|
||
|
||
const timeline = [
|
||
{
|
||
period: '2023-2024',
|
||
title: '萌芽期',
|
||
description: '单 Agent，简单工具调用',
|
||
detailDescription: 'Agent 技术的起步阶段，主要是简单的单 Agent 系统，能够调用有限工具完成基础任务。这个阶段证明了 Agent 的可行性，但能力还比较有限。',
|
||
features: [
|
||
'单一 Agent 执行',
|
||
'基础工具调用',
|
||
'简单的任务规划',
|
||
'有限的记忆能力'
|
||
],
|
||
applications: [
|
||
{ icon: '💬', name: '聊天机器人', description: '增强型对话助手' },
|
||
{ icon: '🔍', name: '搜索助手', description: '信息检索和汇总' },
|
||
{ icon: '📝', name: '写作助手', description: '内容生成辅助' }
|
||
],
|
||
challenges: [
|
||
'规划能力弱',
|
||
'容易迷失目标',
|
||
'上下文管理困难',
|
||
'错误恢复能力差'
|
||
]
|
||
},
|
||
{
|
||
period: '2024-2025',
|
||
title: '成长期',
|
||
description: '多工具，复杂任务处理',
|
||
detailDescription: 'Agent 开始能够处理更复杂的任务，使用多个工具，具备基本的规划能力。框架和工具日趋成熟，开始出现实际应用。',
|
||
features: [
|
||
'多工具协作',
|
||
'层次化任务分解',
|
||
'短期记忆管理',
|
||
'基础的反思能力'
|
||
],
|
||
applications: [
|
||
{ icon: '💻', name: '编程助手', description: '代码编写和调试' },
|
||
{ icon: '📊', name: '数据分析', description: '自动化报告生成' },
|
||
{ icon: '🌐', name: 'Web Agent', description: '网页自动化操作' }
|
||
],
|
||
challenges: [
|
||
'长期规划困难',
|
||
'记忆容量有限',
|
||
'工具选择不准确',
|
||
'安全风险增加'
|
||
]
|
||
},
|
||
{
|
||
period: '2025-2026',
|
||
title: '成熟期',
|
||
description: '多 Agent 协作，专业化分工',
|
||
detailDescription: '多个专业化的 Agent 开始协作，每个 Agent 专注于特定领域。通过通信和协作完成复杂任务，形成 AI 团队。',
|
||
features: [
|
||
'多 Agent 协作',
|
||
'专业化分工',
|
||
'持久化记忆',
|
||
'主动学习和改进'
|
||
],
|
||
applications: [
|
||
{ icon: '👥', name: 'AI 团队', description: '协作完成复杂项目' },
|
||
{ icon: '🔬', name: '研究助手', description: '自动化科研流程' },
|
||
{ icon: '🏢', name: '企业助手', description: '业务流程自动化' }
|
||
],
|
||
challenges: [
|
||
'Agent 间通信效率',
|
||
'协作策略优化',
|
||
'资源调度复杂',
|
||
'责任归属问题'
|
||
]
|
||
},
|
||
{
|
||
period: '2026-2028',
|
||
title: '进化期',
|
||
description: '自主 Agent，持续学习',
|
||
detailDescription: 'Agent 具备强大的自主学习和改进能力，能够从经验中学习，优化自己的行为。可以适应新环境，掌握新技能，实现真正的智能。',
|
||
features: [
|
||
'自主学习和优化',
|
||
'跨任务知识迁移',
|
||
'多模态理解',
|
||
'情感和个性'
|
||
],
|
||
applications: [
|
||
{ icon: '🤖', name: '个人助理', description: '全天候智能助手' },
|
||
{ icon: '🎨', name: '创意专家', description: '艺术创作和设计' },
|
||
{ icon: '🔬', name: '科学家', description: '独立开展研究' }
|
||
],
|
||
challenges: [
|
||
'伦理和道德',
|
||
'可控性和安全性',
|
||
'社会接受度',
|
||
'法律监管'
|
||
]
|
||
},
|
||
{
|
||
period: '2028+',
|
||
title: '融合期',
|
||
description: '人机共生，Agent 社会',
|
||
detailDescription: 'Agent 深度融入人类社会，成为工作、生活不可或缺的伙伴。形成复杂的 Agent 社会，与人类共同创造价值。',
|
||
features: [
|
||
'人机深度融合',
|
||
'Agent 社会形成',
|
||
'集体智能涌现',
|
||
'通用人工智能'
|
||
],
|
||
applications: [
|
||
{ icon: '🌍', name: '全球协作', description: '跨区域 Agent 协作' },
|
||
{ icon: '🧠', name: '知识网络', description: '全人类知识整合' },
|
||
{ icon: '🚀', name: '创新引擎', description: '加速科技发展' }
|
||
],
|
||
challenges: [
|
||
'人类身份认同',
|
||
'社会结构变化',
|
||
'AI 治理',
|
||
'存在性风险'
|
||
]
|
||
}
|
||
]
|
||
|
||
const predictions = [
|
||
{
|
||
icon: '🧠',
|
||
title: '通用 Agent',
|
||
description: '能够处理几乎所有类型的任务，达到人类专家水平',
|
||
timeline: '2027-2030'
|
||
},
|
||
{
|
||
icon: '👥',
|
||
title: 'Agent 社会',
|
||
description: '数百万 Agent 协作工作，形成复杂的经济系统',
|
||
timeline: '2028-2032'
|
||
},
|
||
{
|
||
icon: '🔬',
|
||
title: '科学突破',
|
||
description: 'Agent 帮助人类在药物、材料、能源等领域取得重大突破',
|
||
timeline: '2026-2028'
|
||
},
|
||
{
|
||
icon: '🎨',
|
||
title: '创意革命',
|
||
description: 'Agent 在艺术、音乐、文学等创作领域达到大师水准',
|
||
timeline: '2025-2027'
|
||
},
|
||
{
|
||
icon: '🏥',
|
||
title: '医疗革命',
|
||
description: 'Agent 医生提供个性化、精准化的医疗服务',
|
||
timeline: '2026-2029'
|
||
},
|
||
{
|
||
icon: '🌍',
|
||
title: '全球协作',
|
||
description: 'Agent 打破语言和文化障碍，实现真正的全球协作',
|
||
timeline: '2027-2030'
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.agent-future-demo {
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
background: var(--vp-c-bg-soft);
|
||
margin: 24px 0;
|
||
}
|
||
|
||
.future-intro {
|
||
text-align: center;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.future-intro h3 {
|
||
margin: 0 0 8px 0;
|
||
color: var(--vp-c-brand);
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.future-intro p {
|
||
margin: 0;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding: 20px 0;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.timeline-line {
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4px;
|
||
background: linear-gradient(180deg, var(--vp-c-brand), var(--vp-c-brand-light));
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-left: 60px;
|
||
padding-bottom: 24px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.timeline-item:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.timeline-item.active {
|
||
opacity: 1;
|
||
}
|
||
|
||
.timeline-dot {
|
||
position: absolute;
|
||
left: 6px;
|
||
top: 0;
|
||
width: 32px;
|
||
height: 32px;
|
||
background: var(--vp-c-bg);
|
||
border: 4px solid var(--vp-c-divider);
|
||
border-radius: 50%;
|
||
transition: all 0.3s;
|
||
z-index: 1;
|
||
}
|
||
|
||
.timeline-item.active .timeline-dot {
|
||
border-color: var(--vp-c-brand);
|
||
background: var(--vp-c-brand);
|
||
box-shadow: 0 0 20px rgba(66, 153, 225, 0.5);
|
||
}
|
||
|
||
.timeline-content {
|
||
background: var(--vp-c-bg);
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
border: 2px solid var(--vp-c-divider);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.timeline-item.active .timeline-content {
|
||
border-color: var(--vp-c-brand);
|
||
box-shadow: 0 4px 20px rgba(66, 153, 225, 0.2);
|
||
}
|
||
|
||
.era-period {
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-brand);
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.era-title {
|
||
font-size: 1.1rem;
|
||
font-weight: bold;
|
||
color: var(--vp-c-text-1);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.era-description {
|
||
color: var(--vp-c-text-2);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.era-details {
|
||
background: var(--vp-c-bg);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.detail-card h4 {
|
||
margin: 0 0 12px 0;
|
||
color: var(--vp-c-brand);
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.era-detail-desc {
|
||
color: var(--vp-c-text-2);
|
||
line-height: 1.7;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.era-features {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.features-title {
|
||
font-weight: bold;
|
||
margin-bottom: 12px;
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
|
||
.features-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.feature-tag {
|
||
padding: 6px 12px;
|
||
background: var(--vp-c-bg-soft);
|
||
border-radius: 6px;
|
||
color: var(--vp-c-text-1);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.era-applications {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.applications-title {
|
||
font-weight: bold;
|
||
margin-bottom: 12px;
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
|
||
.applications-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.app-item {
|
||
padding: 16px;
|
||
background: var(--vp-c-bg-soft);
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.app-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.app-name {
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
|
||
.app-desc {
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.era-challenges {
|
||
padding: 16px;
|
||
background: rgba(239, 68, 68, 0.1);
|
||
border-left: 4px solid #ef4444;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.challenges-title {
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
color: #ef4444;
|
||
}
|
||
|
||
.era-challenges ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
list-style: none;
|
||
}
|
||
|
||
.era-challenges li {
|
||
padding: 4px 0;
|
||
color: var(--vp-c-text-2);
|
||
position: relative;
|
||
}
|
||
|
||
.era-challenges li::before {
|
||
content: '⚠️';
|
||
position: absolute;
|
||
left: -20px;
|
||
}
|
||
|
||
.future-predictions h4 {
|
||
margin: 0 0 20px 0;
|
||
color: var(--vp-c-text-1);
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.predictions-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.prediction-card {
|
||
background: var(--vp-c-bg);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
border: 2px solid var(--vp-c-divider);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.prediction-card:hover {
|
||
border-color: var(--vp-c-brand);
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 4px 20px rgba(66, 153, 225, 0.2);
|
||
}
|
||
|
||
.prediction-icon {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.prediction-title {
|
||
font-weight: bold;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 8px;
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
|
||
.prediction-desc {
|
||
color: var(--vp-c-text-2);
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.prediction-time {
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-brand);
|
||
font-weight: 600;
|
||
}
|
||
</style>
|