feat(ai-protocols): add MCP and A2A protocol demos and documentation
docs(ai-protocols): update AI protocols page with visual demos and detailed explanations style(git-demos): improve responsive design and layout for git visualization components refactor(ai-history): simplify and clean up demo components chore: update config to register new AI protocol components
This commit is contained in:
sanbuphy
@@ -1,239 +1,3 @@
|
||||
<template>
|
||||
<div class="ai-evolution-timeline-demo">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="main-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>AI 进化时间轴</h3>
|
||||
<p class="subtitle">
|
||||
点击不同时期，查看 AI 是如何一步步进化的
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { CaretRight } from '@element-plus/icons-vue'
|
||||
|
||||
const activeEraName = ref('符号主义时代')
|
||||
|
||||
const eras = [
|
||||
{
|
||||
year: '20世纪50-80年代',
|
||||
title: '符号主义时代',
|
||||
desc: '规则与逻辑推理',
|
||||
fullDesc:
|
||||
'早期人工智能研究认为，智能可以通过符号和逻辑规则来表达。科学家们尝试编写大量规则来让机器模拟人类专家的决策过程。',
|
||||
examples: ['专家系统', '深蓝 (Deep Blue)', 'MYCIN'],
|
||||
keyPoints: [
|
||||
'人工编写 If-Then 规则',
|
||||
'逻辑推理能力强大',
|
||||
'可解释性强',
|
||||
'难以处理模糊/复杂问题'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: '21世纪10年代',
|
||||
title: '连接主义时代',
|
||||
desc: '神经网络与深度学习',
|
||||
fullDesc:
|
||||
'随着大数据和 GPU 算力的突破，深度学习迎来了春天。神经网络通过多层结构自动学习特征，在图像识别、语音识别等领域取得巨大成功。',
|
||||
examples: ['AlexNet', 'AlphaGo', '人脸识别'],
|
||||
keyPoints: [
|
||||
'模仿人脑神经元结构',
|
||||
'从数据中自动学习特征',
|
||||
'强大的模式识别能力',
|
||||
'模型是"黑盒"，缺乏可解释性'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: '21世纪20年代至今',
|
||||
title: '生成式 AI 时代',
|
||||
desc: '大模型与创造力',
|
||||
fullDesc:
|
||||
'Transformer 架构的诞生让机器理解了上下文关系。GPT 等大语言模型不仅能生成文本、图像，还展现出了惊人的推理和创造能力。',
|
||||
examples: ['ChatGPT', 'Midjourney', 'Sora'],
|
||||
keyPoints: [
|
||||
'基于 Transformer 架构',
|
||||
'通用的理解与生成能力',
|
||||
'涌现出推理、规划等高级智能',
|
||||
'通过提示词 (Prompt) 交互'
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ai-evolution-timeline-demo {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
/* Compact card style */
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.timeline-tabs {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.era-content {
|
||||
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;
|
||||
}
|
||||
|
||||
.column-title {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #909399;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.key-points-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.key-points-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.point-icon {
|
||||
margin-right: 5px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.examples-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.info-grid {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
</template>
|
||||
@@ -1,697 +1,41 @@
|
||||
<template>
|
||||
<div class="evolution-demo">
|
||||
<el-card
|
||||
class="main-card"
|
||||
shadow="hover"
|
||||
>
|
||||
<template #header>
|
||||
<div class="header-container">
|
||||
<div class="title-area">
|
||||
<span class="main-title">AI 进化模拟器</span>
|
||||
</div>
|
||||
<el-steps
|
||||
:active="currentStage"
|
||||
finish-status="success"
|
||||
align-center
|
||||
class="compact-steps"
|
||||
simple
|
||||
>
|
||||
<el-step
|
||||
v-for="stage in stages"
|
||||
:key="stage.id"
|
||||
:title="stage.label"
|
||||
/>
|
||||
</el-steps>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Stage 1: Rule Based (Traffic Light Example) -->
|
||||
<div
|
||||
v-if="currentStage === 0"
|
||||
class="stage-pane"
|
||||
>
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="compact-alert mb-2"
|
||||
>
|
||||
<template #title>
|
||||
<span class="alert-title">阶段一：规则时代 (Rule-Based)</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<span class="alert-desc">就像教小孩：如果看到红灯，就停下。</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<div class="game-area-grid">
|
||||
<div class="panel left-panel">
|
||||
<div class="panel-header">
|
||||
规则库 (Code)
|
||||
</div>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="keyword">function</span> <span class="function">decideTrafficLight</span>(color) {
|
||||
</div>
|
||||
<div class="code-line indent">
|
||||
<span class="keyword">if</span> (color === <span class="string">'red'</span>) <span class="keyword">return</span> <span class="string">'stop'</span>
|
||||
</div>
|
||||
<div class="code-line indent">
|
||||
<span class="keyword">else if</span> (color === <span class="string">'yellow'</span>) <span class="keyword">return</span> <span class="string">'caution'</span>
|
||||
</div>
|
||||
<div class="code-line indent">
|
||||
<span class="keyword">else if</span> (color === <span class="string">'green'</span>) <span class="keyword">return</span> <span class="string">'go'</span>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel right-panel">
|
||||
<div class="panel-header">
|
||||
测试输入
|
||||
</div>
|
||||
<div class="input-controls">
|
||||
<el-select
|
||||
v-model="ruleColor"
|
||||
size="small"
|
||||
style="width: 120px;"
|
||||
>
|
||||
<el-option
|
||||
value="red"
|
||||
label="🔴 红灯"
|
||||
/>
|
||||
<el-option
|
||||
value="yellow"
|
||||
label="🟡 黄灯"
|
||||
/>
|
||||
<el-option
|
||||
value="green"
|
||||
label="🟢 绿灯"
|
||||
/>
|
||||
<el-option
|
||||
value="blue"
|
||||
label="🔵 蓝灯"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="arrow">
|
||||
→
|
||||
</div>
|
||||
<el-tag :type="ruleResult === 'stop' ? 'danger' : ruleResult === 'caution' ? 'warning' : ruleResult === 'go' ? 'success' : 'info'">
|
||||
{{ ruleResult }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div
|
||||
v-if="ruleResult === 'Unknown'"
|
||||
class="hint-text"
|
||||
>
|
||||
规则库中没有定义"蓝灯"，所以系统不知道该做什么。这就是规则系统的局限性：无法处理未定义的规则。
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="hint-text"
|
||||
>
|
||||
系统严格按照预定义的规则执行指令。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 class="era-label">{{ era.label }}</div>
|
||||
<div class="era-years">{{ era.years }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 2: Machine Learning (Interactive 2D Plot) -->
|
||||
<div
|
||||
v-else-if="currentStage === 1"
|
||||
class="stage-pane"
|
||||
>
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="compact-alert mb-2"
|
||||
>
|
||||
<template #title>
|
||||
<span class="alert-title">阶段二：机器学习 (Machine Learning)</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<span class="alert-desc">点击画布添加数据点，训练模型自动寻找分类边界 (Decision Boundary)。</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<div class="game-area-grid">
|
||||
<div
|
||||
class="panel left-panel canvas-container"
|
||||
@click="addPoint"
|
||||
>
|
||||
<!-- Simple SVG Plot -->
|
||||
<svg
|
||||
width="100%"
|
||||
height="200"
|
||||
class="ml-plot"
|
||||
>
|
||||
<!-- Background Regions (Visible after training) -->
|
||||
<rect
|
||||
v-if="modelTrained"
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:fill="boundaryColor"
|
||||
/>
|
||||
|
||||
<!-- Decision Line -->
|
||||
<line
|
||||
v-if="modelTrained"
|
||||
:x1="line.x1"
|
||||
:y1="line.y1"
|
||||
:x2="line.x2"
|
||||
:y2="line.y2"
|
||||
stroke="#333"
|
||||
stroke-width="2"
|
||||
stroke-dasharray="4"
|
||||
/>
|
||||
|
||||
<!-- Points -->
|
||||
<circle
|
||||
v-for="(p, i) in points"
|
||||
:key="i"
|
||||
:cx="p.x"
|
||||
:cy="p.y"
|
||||
r="6"
|
||||
:fill="p.type === 'A' ? '#409eff' : '#e6a23c'"
|
||||
stroke="white"
|
||||
stroke-width="2"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
v-if="points.length === 0"
|
||||
class="canvas-hint"
|
||||
>
|
||||
👆 点击此处添加数据点
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel right-panel">
|
||||
<div class="panel-header">
|
||||
控制面板
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<span class="label">当前类别:</span>
|
||||
<el-radio-group
|
||||
v-model="currentClass"
|
||||
size="small"
|
||||
>
|
||||
<el-radio-button label="A">
|
||||
<span style="color: #409eff">● 蓝类</span>
|
||||
</el-radio-button>
|
||||
<el-radio-button label="B">
|
||||
<span style="color: #e6a23c">● 橙类</span>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="control-group mt-2">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="points.length < 2"
|
||||
@click="trainLinearModel"
|
||||
>
|
||||
⚡ 开始训练 (Fit)
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
:icon="Delete"
|
||||
circle
|
||||
@click="clearPoints"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="stats-info mt-2">
|
||||
<p
|
||||
v-if="!modelTrained"
|
||||
class="text-desc"
|
||||
>
|
||||
机器学习不再依赖硬编码规则，而是通过统计学方法（如寻找中心点或线性回归）在数据之间划出一条"界线"。试试在不同位置添加点，看看界线如何变化。
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="text-desc"
|
||||
>
|
||||
模型已训练！它找到了一条最佳分割线。新进来的数据将根据它在红区还是蓝区被自动分类。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stage 3: Deep Learning (3x3 Grid Feature Extraction) -->
|
||||
<div
|
||||
v-else
|
||||
class="stage-pane"
|
||||
>
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="compact-alert mb-2"
|
||||
>
|
||||
<template #title>
|
||||
<span class="alert-title">阶段三：深度学习 (Deep Learning)</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<span class="alert-desc">神经网络通过多层结构自动提取特征（Feature Extraction）。点击格子绘制图案。</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
|
||||
<div class="game-area-grid">
|
||||
<div class="panel left-panel grid-container">
|
||||
<div class="pixel-grid">
|
||||
<div
|
||||
v-for="(pixel, i) in pixels"
|
||||
:key="i"
|
||||
class="pixel"
|
||||
:class="{ active: pixel }"
|
||||
@click="togglePixel(i)"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid-actions">
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
@click="preset('x')"
|
||||
>
|
||||
❌ X型
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
@click="preset('plus')"
|
||||
>
|
||||
➕ 十字
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
link
|
||||
@click="clearPixels"
|
||||
>
|
||||
清空
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel right-panel">
|
||||
<div class="panel-header">
|
||||
神经网络层级透视
|
||||
</div>
|
||||
|
||||
<!-- Visualization of Layers -->
|
||||
<div class="network-viz">
|
||||
<div class="layer input-layer">
|
||||
<div class="layer-label">
|
||||
输入层 (Pixels)
|
||||
</div>
|
||||
<div class="nodes">
|
||||
<span
|
||||
v-for="n in 9"
|
||||
:key="n"
|
||||
class="node mini"
|
||||
:class="{active: pixels[n-1]}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">
|
||||
⬇️ 卷积/提取特征
|
||||
</div>
|
||||
|
||||
<div class="layer hidden-layer">
|
||||
<div class="layer-label">
|
||||
隐藏层 (Features)
|
||||
</div>
|
||||
<div class="feature-detectors">
|
||||
<div
|
||||
class="feature"
|
||||
:class="{detected: features.center}"
|
||||
>
|
||||
<span class="f-icon">⏺</span> 中心点
|
||||
</div>
|
||||
<div
|
||||
class="feature"
|
||||
:class="{detected: features.corners}"
|
||||
>
|
||||
<span class="f-icon">Corners</span> 四角
|
||||
</div>
|
||||
<div
|
||||
class="feature"
|
||||
:class="{detected: features.cross}"
|
||||
>
|
||||
<span class="f-icon">➕</span> 交叉
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-down">
|
||||
⬇️ 输出层
|
||||
</div>
|
||||
|
||||
<div class="layer output-layer">
|
||||
<div class="prediction-box">
|
||||
识别结果: <span class="result-text">{{ prediction }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Navigation -->
|
||||
<div class="footer-nav mt-2 flex justify-end">
|
||||
<el-button-group>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="currentStage === 0"
|
||||
@click="currentStage--"
|
||||
>
|
||||
上一步
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="currentStage === 2"
|
||||
@click="currentStage++"
|
||||
>
|
||||
下一步
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span class="legend-item"><span class="dot" style="background:#059669"></span>技术浪潮</span>
|
||||
<span class="legend-item"><span class="dot" style="background:#94a3b8"></span>❄️ AI 寒冬</span>
|
||||
<span class="legend-item"><span class="dot" style="background:#7c3aed"></span>大模型时代</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { Delete } from '@element-plus/icons-vue'
|
||||
|
||||
const currentStage = ref(0)
|
||||
const stages = [
|
||||
{ id: 0, label: '规则', desc: '人工规则' },
|
||||
{ id: 1, label: '机器学习', desc: '统计特征' },
|
||||
{ id: 2, label: '深度学习', desc: '自动特征' }
|
||||
const eras = [
|
||||
{ label: '理论奠基', years: '1940s-50s', flex: 1.5, bg: 'linear-gradient(135deg, #dbeafe, #bfdbfe)' },
|
||||
{ label: '第一次浪潮', years: '1960s-70s', flex: 1.5, bg: 'linear-gradient(135deg, #d1fae5, #a7f3d0)' },
|
||||
{ label: '❄️ 寒冬 I', years: '1974-80', flex: 0.7, bg: 'linear-gradient(135deg, #e2e8f0, #cbd5e1)' },
|
||||
{ label: '第二次浪潮', years: '1980s', flex: 1, bg: 'linear-gradient(135deg, #d1fae5, #a7f3d0)' },
|
||||
{ label: '❄️ 寒冬 II', years: '1987-93', flex: 0.7, bg: 'linear-gradient(135deg, #e2e8f0, #cbd5e1)' },
|
||||
{ label: 'ML 崛起', years: '1990s-2000s', flex: 1.5, bg: 'linear-gradient(135deg, #d1fae5, #6ee7b7)' },
|
||||
{ label: '深度学习', years: '2010s', flex: 1.2, bg: 'linear-gradient(135deg, #a7f3d0, #34d399)' },
|
||||
{ label: '大模型时代', years: '2018+', flex: 1.2, bg: 'linear-gradient(135deg, #c4b5fd, #a78bfa)' },
|
||||
]
|
||||
|
||||
// --- Stage 1: Rule Based ---
|
||||
const ruleColor = ref('red')
|
||||
const ruleResult = computed(() => {
|
||||
if (ruleColor.value === 'red') return 'stop'
|
||||
if (ruleColor.value === 'yellow') return 'caution'
|
||||
if (ruleColor.value === 'green') return 'go'
|
||||
return 'Unknown'
|
||||
})
|
||||
|
||||
// --- Stage 2: Machine Learning ---
|
||||
const points = ref([])
|
||||
const currentClass = ref('A')
|
||||
const modelTrained = ref(false)
|
||||
const line = reactive({ x1: 0, y1: 0, x2: 0, y2: 0 })
|
||||
// SVG click coordinates are relative to the SVG element
|
||||
// We'll use a simple approximation for the demo
|
||||
// x, y are percentages (0-100)
|
||||
const addPoint = (e) => {
|
||||
const rect = e.target.getBoundingClientRect()
|
||||
// Ensure we are clicking on the SVG or its children
|
||||
// Best to put event on wrapper
|
||||
// But event target might be circle.
|
||||
// Use currentTarget
|
||||
const x = e.offsetX
|
||||
const y = e.offsetY
|
||||
// Convert to % for responsiveness if needed, but pixel is easier for calc
|
||||
// Let's stick to pixel for this simple demo, assuming fixed height 200
|
||||
// width varies.
|
||||
points.value.push({
|
||||
x, y,
|
||||
type: currentClass.value
|
||||
})
|
||||
modelTrained.value = false
|
||||
}
|
||||
|
||||
const clearPoints = () => {
|
||||
points.value = []
|
||||
modelTrained.value = false
|
||||
}
|
||||
|
||||
const trainLinearModel = () => {
|
||||
// Simple Nearest Centroid Classifier
|
||||
const groupA = points.value.filter(p => p.type === 'A')
|
||||
const groupB = points.value.filter(p => p.type === 'B')
|
||||
|
||||
if (groupA.length === 0 || groupB.length === 0) return
|
||||
|
||||
const avgA = {
|
||||
x: groupA.reduce((sum, p) => sum + p.x, 0) / groupA.length,
|
||||
y: groupA.reduce((sum, p) => sum + p.y, 0) / groupA.length
|
||||
}
|
||||
const avgB = {
|
||||
x: groupB.reduce((sum, p) => sum + p.x, 0) / groupB.length,
|
||||
y: groupB.reduce((sum, p) => sum + p.y, 0) / groupB.length
|
||||
}
|
||||
|
||||
// Midpoint
|
||||
const midX = (avgA.x + avgB.x) / 2
|
||||
const midY = (avgA.y + avgB.y) / 2
|
||||
|
||||
// Normal vector (from A to B)
|
||||
const dx = avgB.x - avgA.x
|
||||
const dy = avgB.y - avgA.y
|
||||
|
||||
// Perpendicular line: dx*x + dy*y = C
|
||||
// Slope of normal is dy/dx. Slope of perp line is -dx/dy
|
||||
|
||||
// Let's just draw a line perpendicular to the segment AB passing through Midpoint
|
||||
// Slope m = -dx/dy
|
||||
|
||||
// Calculate line coordinates for visualization
|
||||
// y - midY = m * (x - midX)
|
||||
// if dy is close to 0, vertical line x = midX
|
||||
|
||||
const width = 1000 // ample width
|
||||
|
||||
if (Math.abs(dy) < 0.001) {
|
||||
// Vertical line
|
||||
line.x1 = midX
|
||||
line.x2 = midX
|
||||
line.y1 = 0
|
||||
line.y2 = 200
|
||||
} else {
|
||||
const m = -dx / dy
|
||||
// At x=0
|
||||
const y0 = midY + m * (0 - midX)
|
||||
// At x=width
|
||||
const y1 = midY + m * (width - midX)
|
||||
|
||||
line.x1 = 0
|
||||
line.y1 = y0
|
||||
line.x2 = width
|
||||
line.y2 = y1
|
||||
}
|
||||
|
||||
modelTrained.value = true
|
||||
}
|
||||
|
||||
// Simple visual background
|
||||
// If A is left/top, background is blue-ish
|
||||
// SVG doesn't support "half plane fill" easily without path math
|
||||
// For this demo, we won't fill the background perfectly, just draw the line.
|
||||
const boundaryColor = computed(() => 'transparent')
|
||||
|
||||
|
||||
// --- Stage 3: Deep Learning ---
|
||||
const pixels = ref(Array(9).fill(false))
|
||||
|
||||
const togglePixel = (index) => {
|
||||
pixels.value[index] = !pixels.value[index]
|
||||
}
|
||||
|
||||
const clearPixels = () => {
|
||||
pixels.value = pixels.value.map(() => false)
|
||||
}
|
||||
|
||||
const preset = (type) => {
|
||||
clearPixels()
|
||||
if (type === 'x') {
|
||||
[0, 2, 4, 6, 8].forEach(i => pixels.value[i] = true)
|
||||
} else if (type === 'plus') {
|
||||
[1, 3, 4, 5, 7].forEach(i => pixels.value[i] = true)
|
||||
}
|
||||
}
|
||||
|
||||
const features = computed(() => {
|
||||
// Simple heuristics to simulate feature detection
|
||||
const p = pixels.value
|
||||
const center = p[4]
|
||||
const corners = p[0] && p[2] && p[6] && p[8]
|
||||
const cross = p[1] && p[3] && p[5] && p[7]
|
||||
|
||||
return { center, corners, cross }
|
||||
})
|
||||
|
||||
const prediction = computed(() => {
|
||||
const f = features.value
|
||||
if (f.corners && f.center) return 'X 型图案 (X-Shape)'
|
||||
if (f.cross && f.center) return '十字型 (Plus-Shape)'
|
||||
if (f.corners && !f.center) return '四角 (Corners)'
|
||||
if (pixels.value.filter(Boolean).length === 0) return '无输入'
|
||||
return '未知图案'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.evolution-demo { margin: 10px 0; }
|
||||
.header-container { margin-bottom: 5px; }
|
||||
.main-title { font-weight: bold; font-size: 16px; }
|
||||
.compact-steps { padding: 5px 0; margin-bottom: 10px; }
|
||||
.compact-alert { padding: 5px 10px; }
|
||||
.alert-title { font-weight: bold; font-size: 13px; }
|
||||
.alert-desc { font-size: 12px; }
|
||||
|
||||
.game-area-grid {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.panel {
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
.left-panel { flex: 1; }
|
||||
.right-panel { flex: 1; background-color: #fcfcfc; }
|
||||
.panel-header {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #606266;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Stage 1 */
|
||||
.code-block {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background: #282c34;
|
||||
color: #abb2bf;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.keyword { color: #c678dd; }
|
||||
.string { color: #98c379; }
|
||||
.function { color: #61afef; }
|
||||
.indent { padding-left: 15px; }
|
||||
.input-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.hint-text {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* Stage 2 */
|
||||
.canvas-container {
|
||||
height: 220px;
|
||||
background-color: #f5f7fa;
|
||||
position: relative;
|
||||
cursor: crosshair;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ml-plot {
|
||||
display: block;
|
||||
}
|
||||
.canvas-hint {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.text-desc {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Stage 3 */
|
||||
.grid-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pixel-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 40px);
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pixel {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #eee;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.pixel:hover { background-color: #d9d9d9; }
|
||||
.pixel.active { background-color: #333; }
|
||||
|
||||
.network-viz {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.layer {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.layer-label { font-size: 11px; color: #909399; margin-bottom: 4px; }
|
||||
.nodes { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; width: 60px; margin: 0 auto; }
|
||||
.node.mini { width: 6px; height: 6px; border-radius: 50%; background: #ddd; }
|
||||
.node.mini.active { background: #333; }
|
||||
.arrow-down { font-size: 10px; color: #ccc; }
|
||||
|
||||
.feature-detectors {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 11px;
|
||||
}
|
||||
.feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.feature.detected { opacity: 1; color: #409eff; font-weight: bold; }
|
||||
.f-icon { font-size: 14px; margin-bottom: 2px; }
|
||||
|
||||
.prediction-box { font-weight: bold; font-size: 13px; color: #303133; }
|
||||
.result-text { color: #67c23a; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.game-area-grid { flex-direction: column; }
|
||||
}
|
||||
.flex { display: flex; }
|
||||
.justify-end { justify-content: flex-end; }
|
||||
.mt-2 { margin-top: 8px; }
|
||||
.mb-2 { margin-bottom: 8px; }
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
|
||||
.timeline-visual { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--vp-c-divider); min-height: 60px; }
|
||||
.era { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.4rem 0.2rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.4); }
|
||||
.era:last-child { border-right: none; }
|
||||
.era-label { font-size: 0.65rem; font-weight: bold; color: #1e293b; line-height: 1.2; }
|
||||
.era-years { font-size: 0.55rem; color: #475569; margin-top: 0.15rem; }
|
||||
.legend { display: flex; gap: 1rem; margin-top: 0.6rem; flex-wrap: wrap; }
|
||||
.legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--vp-c-text-2); }
|
||||
.dot { width: 8px; height: 8px; border-radius: 2px; }
|
||||
@media (max-width: 640px) { .era-label { font-size: 0.58rem; } .era-years { display: none; } }
|
||||
</style>
|
||||
@@ -1,199 +1,50 @@
|
||||
<template>
|
||||
<div class="attention-mechanism-demo">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>👁️ 注意力机制演示</h4>
|
||||
<p class="subtitle">
|
||||
点击词语，观察它如何"关注"句子中的其他词
|
||||
</p>
|
||||
<div class="demo-card">
|
||||
<div class="attention-layout">
|
||||
<div class="sentence-col">
|
||||
<div class="col-label">处理「<strong>他</strong>」时的注意力分配：</div>
|
||||
<div class="sentence-box">
|
||||
<span v-for="(word, i) in sentence" :key="i" class="word-token" :class="{ focus: i === focusIdx }">{{ word }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="sentence-container">
|
||||
<div class="sentence">
|
||||
<el-tag
|
||||
v-for="(word, index) in sentence"
|
||||
:key="index"
|
||||
:type="activeIndex === index ? 'primary' : 'info'"
|
||||
:effect="activeIndex === index ? 'dark' : 'plain'"
|
||||
class="word-token"
|
||||
@click="selectWord(index)"
|
||||
>
|
||||
{{ word }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="activeIndex !== null"
|
||||
class="attention-bars"
|
||||
>
|
||||
<div
|
||||
v-for="(attention, index) in attentionWeights"
|
||||
:key="index"
|
||||
class="attention-item"
|
||||
>
|
||||
<div class="word-label">
|
||||
{{ attention.word }}
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="Math.round(attention.weight * 100)"
|
||||
:status="attention.weight > 0.5 ? 'exception' : ''"
|
||||
:color="customColors"
|
||||
class="attention-progress"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty
|
||||
v-else
|
||||
description="👆 点击句子中的任意词语开始"
|
||||
:image-size="60"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-collapse-transition>
|
||||
<div
|
||||
v-if="activeIndex !== null"
|
||||
class="explanation-panel"
|
||||
>
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
show-icon
|
||||
class="insight-alert"
|
||||
>
|
||||
<template #title>
|
||||
<span class="insight-title">关键洞察</span>
|
||||
</template>
|
||||
<p>{{ getInsight(activeIndex) }}</p>
|
||||
</el-alert>
|
||||
<div class="bars-col">
|
||||
<div class="attention-item" v-for="(item, i) in weights" :key="i">
|
||||
<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>
|
||||
</div>
|
||||
<span class="bar-pct">{{ Math.round(item.w * 100) }}%</span>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
「他」虽在句中间，模型却把 65% 注意力精准投向句首的「小明」，跨越距离识别代词指代
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const sentence = ref(['小明', '把', '苹果', '给了', '他', '的', '母亲'])
|
||||
const activeIndex = ref(null)
|
||||
|
||||
const customColors = [
|
||||
{ color: '#909399', percentage: 20 },
|
||||
{ color: '#e6a23c', percentage: 40 },
|
||||
{ color: '#f56c6c', percentage: 80 },
|
||||
{ color: '#67c23a', percentage: 100 }
|
||||
]
|
||||
|
||||
// 注意力权重矩阵（模拟）
|
||||
const attentionMatrix = {
|
||||
0: [0.15, 0.05, 0.6, 0.05, 0.05, 0.05, 0.05], // 小明 主要关注 苹果、他
|
||||
1: [0.1, 0.1, 0.4, 0.3, 0.05, 0.03, 0.02], // 把 主要关注 苹果、给了
|
||||
2: [0.5, 0.1, 0.15, 0.15, 0.05, 0.03, 0.02], // 苹果 主要关注 小明
|
||||
3: [0.1, 0.1, 0.35, 0.15, 0.2, 0.05, 0.05], // 给了 主要关注 苹果、他
|
||||
4: [0.65, 0.05, 0.1, 0.1, 0.05, 0.03, 0.02], // 他 主要关注 小明
|
||||
5: [0.08, 0.05, 0.07, 0.08, 0.62, 0.05, 0.05], // 的 主要关注 他
|
||||
6: [0.25, 0.1, 0.15, 0.15, 0.2, 0.1, 0.05] // 母亲 关注多个词
|
||||
}
|
||||
|
||||
const insights = {
|
||||
0: '当模型处理"小明"时，它最关注"苹果"（60%），因为这表明是"谁"拥有苹果。',
|
||||
1: '"把"是介词，模型关注"苹果"和"给了"，理解动作的对象和方向。',
|
||||
2: '"苹果"作为宾语，主要关注主语"小明"，确定归属关系。',
|
||||
3: '"给了"关注"苹果"和"他"，理解传递动作的对象。',
|
||||
4: '"他"最关注"小明"（65%），因为"他"指代的就是"小明"！',
|
||||
5: '"的"连接"他"和"母亲"，主要关注"他"（62%）。',
|
||||
6: '"母亲"作为句末宾语，关注前面的多个词语来理解完整语境。'
|
||||
}
|
||||
|
||||
const attentionWeights = computed(() => {
|
||||
if (activeIndex.value === null) return []
|
||||
|
||||
return sentence.value.map((word, index) => ({
|
||||
word,
|
||||
weight: attentionMatrix[activeIndex.value][index]
|
||||
}))
|
||||
})
|
||||
|
||||
const selectWord = (index) => {
|
||||
activeIndex.value = index
|
||||
}
|
||||
|
||||
const getInsight = (index) => {
|
||||
return insights[index]
|
||||
}
|
||||
const sentence = ['小明', '把', '苹果', '给了', '他', '的', '母亲']
|
||||
const focusIdx = 4
|
||||
const attn = [0.65, 0.05, 0.10, 0.10, 0.05, 0.03, 0.02]
|
||||
const weights = sentence.map((word, i) => ({ word, w: attn[i] }))
|
||||
const barColor = (v) => v > 0.5 ? '#dc2626' : v > 0.15 ? '#d97706' : v > 0.06 ? '#059669' : 'var(--vp-c-divider)'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.attention-mechanism-demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.sentence {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.word-token {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 8px 16px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.word-token:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.attention-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.attention-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.word-label {
|
||||
width: 40px;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.attention-progress {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.explanation-panel {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.insight-title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.attention-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.9rem; margin-bottom: 0.5rem; }
|
||||
@media (max-width: 560px) { .attention-layout { grid-template-columns: 1fr; } }
|
||||
.col-label { font-size: 0.76rem; color: var(--vp-c-text-2); margin-bottom: 0.5rem; font-weight: bold; }
|
||||
.sentence-box { display: flex; flex-wrap: wrap; gap: 0.35rem; background: var(--vp-c-bg-alt); padding: 0.6rem; border-radius: 5px; border: 1px dashed var(--vp-c-divider); }
|
||||
.word-token { font-size: 0.88rem; font-weight: bold; padding: 0.2rem 0.5rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 4px; }
|
||||
.word-token.focus { background: var(--vp-c-brand); color: white; border-color: var(--vp-c-brand); }
|
||||
.bars-col { display: flex; flex-direction: column; gap: 0.3rem; justify-content: center; }
|
||||
.attention-item { display: flex; align-items: center; gap: 0.4rem; }
|
||||
.bar-word { width: 30px; text-align: right; font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-2); flex-shrink: 0; }
|
||||
.bar-word.focus { color: var(--vp-c-brand); }
|
||||
.bar-bg { flex: 1; height: 12px; background: var(--vp-c-bg-alt); border-radius: 6px; overflow: hidden; border: 1px solid var(--vp-c-divider); }
|
||||
.bar-fill { height: 100%; border-radius: 6px; }
|
||||
.bar-pct { font-size: 0.7rem; font-weight: bold; color: var(--vp-c-text-2); width: 30px; flex-shrink: 0; }
|
||||
.caption { font-size: 0.75rem; color: var(--vp-c-text-3); text-align: center; }
|
||||
</style>
|
||||
|
||||
@@ -1,332 +1,54 @@
|
||||
<template>
|
||||
<div class="backpropagation-demo">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>🔄 反向传播演示</h4>
|
||||
<p class="subtitle">
|
||||
观察神经网络如何通过误差反向调整权重
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="network-view">
|
||||
<svg
|
||||
class="network-svg"
|
||||
viewBox="0 0 600 300"
|
||||
>
|
||||
<!-- Layers visualization -->
|
||||
<g
|
||||
v-for="(layer, lIndex) in 3"
|
||||
:key="lIndex"
|
||||
>
|
||||
<text
|
||||
:x="100 + lIndex * 200"
|
||||
y="20"
|
||||
text-anchor="middle"
|
||||
class="layer-label"
|
||||
fill="currentColor"
|
||||
>
|
||||
{{
|
||||
lIndex === 0 ? '输入层' : lIndex === 1 ? '隐藏层' : '输出层'
|
||||
}}
|
||||
</text>
|
||||
|
||||
<circle
|
||||
v-for="n in 3"
|
||||
:key="`${lIndex}-${n}`"
|
||||
:cx="100 + lIndex * 200"
|
||||
:cy="60 + n * 70"
|
||||
:r="25"
|
||||
:class="['neuron', getNeuronClass(lIndex, n)]"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<!-- Connections with error flow -->
|
||||
<line
|
||||
v-for="conn in connections"
|
||||
:key="conn.id"
|
||||
:x1="conn.x1"
|
||||
:y1="conn.y1"
|
||||
:x2="conn.x2"
|
||||
:y2="conn.y2"
|
||||
:stroke="conn.color"
|
||||
:stroke-width="conn.width"
|
||||
:opacity="conn.opacity"
|
||||
class="connection"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="controls-panel">
|
||||
<el-steps
|
||||
:active="currentStep"
|
||||
align-center
|
||||
finish-status="success"
|
||||
>
|
||||
<el-step
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
:title="step"
|
||||
/>
|
||||
</el-steps>
|
||||
|
||||
<div class="error-display mt-4">
|
||||
<div class="flex justify-between mb-2">
|
||||
<span class="text-sm">误差 (Loss)</span>
|
||||
<span class="text-sm font-bold">{{ errorValue.toFixed(4) }}</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="Math.round(errorValue * 100)"
|
||||
:color="customColors"
|
||||
:striped="currentStep === 2"
|
||||
:striped-flow="currentStep === 2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
:title="explanations[currentStep]"
|
||||
type="info"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="mt-4"
|
||||
/>
|
||||
|
||||
<div class="action-buttons mt-4 flex justify-center gap-4">
|
||||
<el-button
|
||||
:disabled="currentStep === 0"
|
||||
@click="resetDemo"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="currentStep >= 4"
|
||||
@click="nextStep"
|
||||
>
|
||||
{{ currentStep < 4 ? '下一步' : '完成' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<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 class="step-num" :style="{ background: step.color }">{{ i + 1 }}</div>
|
||||
<div class="step-icon">{{ step.icon }}</div>
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="loss-visual">
|
||||
<div class="loss-label">Loss（误差）随训练轮次下降：</div>
|
||||
<svg viewBox="0 0 300 60" class="loss-svg">
|
||||
<polyline :points="lossPoints" fill="none" stroke="var(--vp-c-brand)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<text x="5" y="10" class="ax">高</text>
|
||||
<text x="5" y="56" class="ax">低</text>
|
||||
<text x="220" y="56" class="ax">训练轮次 →</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
const currentStep = ref(0)
|
||||
const errorValue = ref(0.95)
|
||||
const steps = ['前向传播', '计算误差', '反向传播', '更新权重']
|
||||
const explanations = [
|
||||
'输入数据通过各层传递，得到预测输出。就像学生做完了一套试卷。',
|
||||
'对比预测值和真实值，计算误差。就像老师批改试卷，算出得了多少分（错得有多离谱）。',
|
||||
'将误差从输出层反向传递到各层。就像老师把错题反馈给学生，告诉他是哪一步思路错了。',
|
||||
'根据误差梯度调整每个神经元的权重。学生根据反馈修正自己的理解（权重），下次就能做对了。',
|
||||
'演示完成！通过不断重复这个过程，网络就学会了任务。'
|
||||
const steps = [
|
||||
{ icon: '➡️', name: '前向传播', desc: '数据流过网络，得出预测', color: '#3b82f6' },
|
||||
{ icon: '📐', name: '计算误差', desc: '预测值 vs 正确答案，算 Loss', color: '#d97706' },
|
||||
{ icon: '⬅️', name: '反向传播', desc: '逐层追溯每个权重的"责任"', color: '#dc2626' },
|
||||
{ icon: '⚙️', name: '更新权重', desc: '按责任微调，减少下次误差', color: '#059669' },
|
||||
]
|
||||
|
||||
const customColors = [
|
||||
{ color: '#67c23a', percentage: 20 },
|
||||
{ color: '#e6a23c', percentage: 50 },
|
||||
{ color: '#f56c6c', percentage: 100 }
|
||||
]
|
||||
|
||||
const connections = ref([])
|
||||
|
||||
// Generate initial connections
|
||||
const initConnections = () => {
|
||||
const conns = []
|
||||
// Input -> Hidden
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
for (let j = 1; j <= 3; j++) {
|
||||
conns.push({
|
||||
id: `i${i}-h${j}`,
|
||||
x1: 100,
|
||||
y1: 60 + i * 70,
|
||||
x2: 300,
|
||||
y2: 60 + j * 70,
|
||||
width: 2,
|
||||
color: '#dcdfe6',
|
||||
opacity: 0.5
|
||||
})
|
||||
}
|
||||
const lossPoints = (() => {
|
||||
const pts = []
|
||||
for (let i = 0; i <= 50; i++) {
|
||||
const x = 20 + i * 5.2
|
||||
const y = 52 - 44 * Math.exp(-i * 0.09) + Math.sin(i * 0.7) * 1
|
||||
pts.push(`${x},${y}`)
|
||||
}
|
||||
// Hidden -> Output
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
for (let j = 1; j <= 3; j++) {
|
||||
conns.push({
|
||||
id: `h${i}-o${j}`,
|
||||
x1: 300,
|
||||
y1: 60 + i * 70,
|
||||
x2: 500,
|
||||
y2: 60 + j * 70,
|
||||
width: 2,
|
||||
color: '#dcdfe6',
|
||||
opacity: 0.5
|
||||
})
|
||||
}
|
||||
}
|
||||
connections.value = conns
|
||||
}
|
||||
|
||||
const getNeuronClass = (layerIndex, neuronIndex) => {
|
||||
if (currentStep.value === 0) return 'active' // Forward
|
||||
if (currentStep.value === 2) {
|
||||
// Backward
|
||||
if (layerIndex === 2) return 'error-source'
|
||||
if (layerIndex === 1) return 'error-passing'
|
||||
}
|
||||
if (currentStep.value === 3) return 'updating' // Update
|
||||
return ''
|
||||
}
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentStep.value >= 4) return
|
||||
currentStep.value++
|
||||
|
||||
if (currentStep.value === 1) {
|
||||
// Calculate Error
|
||||
// Visual effect only
|
||||
} else if (currentStep.value === 2) {
|
||||
// Backprop: highlight connections red
|
||||
connections.value.forEach((c) => {
|
||||
c.color = '#f56c6c'
|
||||
c.width = 4
|
||||
c.opacity = 1
|
||||
})
|
||||
} else if (currentStep.value === 3) {
|
||||
// Update weights: error drops
|
||||
const reduceError = setInterval(() => {
|
||||
if (errorValue.value > 0.1) {
|
||||
errorValue.value -= 0.05
|
||||
} else {
|
||||
clearInterval(reduceError)
|
||||
}
|
||||
}, 50)
|
||||
|
||||
connections.value.forEach((c) => {
|
||||
c.color = '#67c23a'
|
||||
c.width = 2
|
||||
c.opacity = 0.8
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const resetDemo = () => {
|
||||
currentStep.value = 0
|
||||
errorValue.value = 0.95
|
||||
initConnections()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initConnections()
|
||||
})
|
||||
return pts.join(' ')
|
||||
})()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.backpropagation-demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.network-view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.network-svg {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.layer-label {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
fill: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.neuron {
|
||||
fill: var(--vp-c-bg);
|
||||
stroke: var(--vp-c-text-2);
|
||||
stroke-width: 2;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.neuron.active {
|
||||
fill: var(--el-color-primary-light-9);
|
||||
stroke: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.neuron.error-source {
|
||||
fill: var(--el-color-danger-light-9);
|
||||
stroke: var(--el-color-danger);
|
||||
filter: drop-shadow(0 0 5px var(--el-color-danger));
|
||||
}
|
||||
|
||||
.neuron.error-passing {
|
||||
fill: var(--el-color-warning-light-9);
|
||||
stroke: var(--el-color-warning);
|
||||
}
|
||||
|
||||
.neuron.updating {
|
||||
fill: var(--el-color-success-light-9);
|
||||
stroke: var(--el-color-success);
|
||||
r: 28; /* Pulse effect */
|
||||
}
|
||||
|
||||
.connection {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.bp-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.8rem; }
|
||||
@media (max-width: 600px) { .bp-flow { grid-template-columns: repeat(2, 1fr); } }
|
||||
.step-block { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-top: 3px solid; border-radius: 6px; padding: 0.7rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
|
||||
.step-num { width: 16px; height: 16px; border-radius: 50%; color: white; font-size: 0.6rem; font-weight: bold; display: flex; align-items: center; justify-content: center; }
|
||||
.step-icon { font-size: 1.2rem; }
|
||||
.step-name { font-weight: bold; font-size: 0.78rem; }
|
||||
.step-desc { font-size: 0.68rem; color: var(--vp-c-text-2); line-height: 1.3; }
|
||||
.loss-visual { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.7rem; }
|
||||
.loss-label { font-size: 0.75rem; color: var(--vp-c-text-2); margin-bottom: 0.3rem; }
|
||||
.loss-svg { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
|
||||
.ax { font-size: 6px; fill: var(--vp-c-text-3); }
|
||||
</style>
|
||||
|
||||
+1
-276
@@ -1,278 +1,3 @@
|
||||
<template>
|
||||
<div class="combinatorial-explosion-demo">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>🎯 组合爆炸模拟器</h4>
|
||||
<p class="subtitle">
|
||||
亲手体验"规则指数增长"的恐怖
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="controls-grid">
|
||||
<div class="control-item">
|
||||
<div class="label-row">
|
||||
<span class="label-icon">🎨</span>
|
||||
<span class="label-text">物体特征数量: {{ featureCount }}</span>
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="featureCount"
|
||||
:min="2"
|
||||
:max="6"
|
||||
show-stops
|
||||
:marks="{ 2: '2', 4: '4', 6: '6' }"
|
||||
/>
|
||||
<div class="preview-tags">
|
||||
<el-tag
|
||||
v-for="i in featureCount"
|
||||
:key="i"
|
||||
size="small"
|
||||
:type="getFeatureTagType(i)"
|
||||
effect="plain"
|
||||
>
|
||||
特征{{ i }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-item">
|
||||
<div class="label-row">
|
||||
<span class="label-icon">🔢</span>
|
||||
<span class="label-text">每个特征的可能值: {{ valuesPerFeature }}</span>
|
||||
</div>
|
||||
<el-slider
|
||||
v-model="valuesPerFeature"
|
||||
:min="2"
|
||||
:max="4"
|
||||
show-stops
|
||||
:marks="{ 2: '2', 3: '3', 4: '4' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="visualization-panel">
|
||||
<div class="counter-display">
|
||||
<el-statistic
|
||||
title="需要的规则总数"
|
||||
:value="totalRules"
|
||||
value-style="font-weight: bold; color: var(--el-color-primary)"
|
||||
>
|
||||
<template #suffix>
|
||||
<span class="formula-suffix">= {{ valuesPerFeature }}<sup>{{ featureCount }}</sup></span>
|
||||
</template>
|
||||
</el-statistic>
|
||||
<el-tag
|
||||
:type="complexityInfo.type"
|
||||
effect="dark"
|
||||
class="mt-2"
|
||||
>
|
||||
{{ complexityInfo.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons mt-4">
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="ruleCount >= maxRules"
|
||||
@click="addRule"
|
||||
>
|
||||
✨ 添加规则 ({{ ruleCount }}/{{ maxRules }})
|
||||
</el-button>
|
||||
<el-button @click="resetRules">
|
||||
🔄 重置
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="rules-container mt-4">
|
||||
<transition-group
|
||||
name="el-zoom-in-center"
|
||||
tag="div"
|
||||
class="rules-grid"
|
||||
>
|
||||
<div
|
||||
v-for="(rule, index) in displayedRules"
|
||||
:key="rule.id"
|
||||
class="rule-card-mini"
|
||||
:style="{ borderColor: rule.color }"
|
||||
>
|
||||
<div class="rule-idx">
|
||||
#{{ index + 1 }}
|
||||
</div>
|
||||
<div class="rule-dots">
|
||||
<span
|
||||
v-for="d in 3"
|
||||
:key="d"
|
||||
class="dot"
|
||||
:style="{ backgroundColor: rule.color }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
v-if="showWarning"
|
||||
title="规则太多了！"
|
||||
description="这就是'组合爆炸'。仅仅增加一点点复杂度，规则数量就会爆炸式增长，人类根本写不完。"
|
||||
type="error"
|
||||
show-icon
|
||||
class="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
const featureCount = ref(3)
|
||||
const valuesPerFeature = ref(2)
|
||||
const displayedRules = ref([])
|
||||
const maxRules = 20 // Visual limit
|
||||
|
||||
const totalRules = computed(() =>
|
||||
Math.pow(valuesPerFeature.value, featureCount.value)
|
||||
)
|
||||
const ruleCount = computed(() => displayedRules.value.length)
|
||||
const showWarning = computed(() => totalRules.value > 50)
|
||||
|
||||
const complexityInfo = computed(() => {
|
||||
if (totalRules.value <= 10)
|
||||
return { label: '简单 (可人工处理)', type: 'success' }
|
||||
if (totalRules.value <= 50)
|
||||
return { label: '中等 (有点累了)', type: 'warning' }
|
||||
return { label: '极难 (组合爆炸!)', type: 'danger' }
|
||||
})
|
||||
|
||||
const getFeatureTagType = (i) => {
|
||||
const types = ['', 'success', 'warning', 'danger', 'info']
|
||||
return types[i % types.length]
|
||||
}
|
||||
|
||||
const addRule = () => {
|
||||
if (ruleCount.value >= maxRules) return
|
||||
|
||||
const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
|
||||
displayedRules.value.push({
|
||||
id: Date.now(),
|
||||
color: colors[Math.floor(Math.random() * colors.length)]
|
||||
})
|
||||
}
|
||||
|
||||
const resetRules = () => {
|
||||
displayedRules.value = []
|
||||
}
|
||||
|
||||
// Reset rules when parameters change
|
||||
watch([featureCount, valuesPerFeature], () => {
|
||||
resetRules()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.combinatorial-explosion-demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.controls-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.controls-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.preview-tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.counter-display {
|
||||
text-align: center;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.formula-suffix {
|
||||
font-size: 0.6em;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.rules-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.rule-card-mini {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.rule-idx {
|
||||
font-size: 10px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.rule-dots {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
+25
-316
@@ -1,327 +1,36 @@
|
||||
<template>
|
||||
<div class="discriminative-vs-generative-demo">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>🎯 判别式 vs 生成式 AI</h4>
|
||||
<p class="subtitle">
|
||||
理解两种不同的 AI 范式
|
||||
</p>
|
||||
<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 class="card-head">
|
||||
<span class="school-icon">{{ s.icon }}</span>
|
||||
<span class="school-name" :style="{ color: s.color }">{{ s.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="comparison-container">
|
||||
<el-row :gutter="20">
|
||||
<!-- Discriminative AI -->
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
>
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="ai-panel discriminative"
|
||||
:class="{ active: mode === 'discriminative' }"
|
||||
@click="mode = 'discriminative'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<div class="icon">
|
||||
🔍
|
||||
</div>
|
||||
<h5>判别式 AI</h5>
|
||||
<el-tag
|
||||
size="small"
|
||||
type="success"
|
||||
>
|
||||
分类/识别
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<div class="input-output">
|
||||
<div class="io-box input">
|
||||
<div class="io-label">
|
||||
输入
|
||||
</div>
|
||||
<div class="io-content">
|
||||
<div class="svg-placeholder green">
|
||||
<span class="svg-text">猫图</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">
|
||||
<el-icon><Bottom /></el-icon>
|
||||
</div>
|
||||
|
||||
<div class="io-box output">
|
||||
<div class="io-label">
|
||||
输出
|
||||
</div>
|
||||
<div class="io-content">
|
||||
<el-tag
|
||||
effect="dark"
|
||||
type="success"
|
||||
>
|
||||
这是猫
|
||||
</el-tag>
|
||||
<div class="probability">
|
||||
置信度: 98%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="examples">
|
||||
<h6>典型应用:</h6>
|
||||
<div class="example-tags">
|
||||
<el-tag
|
||||
v-for="tag in [
|
||||
'图像分类',
|
||||
'垃圾邮件过滤',
|
||||
'疾病诊断',
|
||||
'人脸识别'
|
||||
]"
|
||||
:key="tag"
|
||||
size="small"
|
||||
effect="plain"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- Generative AI -->
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
>
|
||||
<el-card
|
||||
shadow="always"
|
||||
class="ai-panel generative"
|
||||
:class="{ active: mode === 'generative' }"
|
||||
@click="mode = 'generative'"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<div class="icon">
|
||||
✨
|
||||
</div>
|
||||
<h5>生成式 AI</h5>
|
||||
<el-tag
|
||||
size="small"
|
||||
type="primary"
|
||||
>
|
||||
创造/生成
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="panel-content">
|
||||
<div class="input-output">
|
||||
<div class="io-box input">
|
||||
<div class="io-label">
|
||||
输入
|
||||
</div>
|
||||
<div class="io-content">
|
||||
<div class="prompt-text">
|
||||
"一只戴墨镜的猫"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">
|
||||
<el-icon><Bottom /></el-icon>
|
||||
</div>
|
||||
|
||||
<div class="io-box output">
|
||||
<div class="io-label">
|
||||
输出
|
||||
</div>
|
||||
<div class="io-content">
|
||||
<div class="svg-placeholder blue">
|
||||
<span class="svg-text">生成图像 ✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="examples">
|
||||
<h6>典型应用:</h6>
|
||||
<div class="example-tags">
|
||||
<el-tag
|
||||
v-for="tag in [
|
||||
'ChatGPT',
|
||||
'Midjourney',
|
||||
'代码生成',
|
||||
'音乐创作'
|
||||
]"
|
||||
:key="tag"
|
||||
size="small"
|
||||
effect="plain"
|
||||
type="primary"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="school-idea">{{ s.idea }}</div>
|
||||
<div class="school-rep">代表：{{ s.rep }}</div>
|
||||
<div class="school-status">{{ s.status }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Bottom } from '@element-plus/icons-vue'
|
||||
|
||||
const mode = ref('discriminative')
|
||||
const schools = [
|
||||
{ name: '符号主义', icon: '📜', color: '#059669', idea: '智能 = 符号推理 / If-Then 规则', rep: '专家系统、深蓝', status: '→ 与连接主义融合（神经符号 AI）' },
|
||||
{ name: '连接主义', icon: '🧠', color: '#7c3aed', idea: '智能 = 神经元网络 + 海量数据', rep: 'AlphaGo、GPT 系列', status: '→ 主导大模型时代，当前主流' },
|
||||
{ name: '行为主义', icon: '🎮', color: '#d97706', idea: '智能 = 与环境互动 / 强化学习', rep: 'AlphaGo（RL 部分）', status: '→ 与连接主义融合（深度强化学习）' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.discriminative-vs-generative-demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.comparison-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ai-panel {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border: 2px solid transparent;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ai-panel:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.ai-panel.active {
|
||||
border-color: var(--el-color-primary);
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.panel-header h5 {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.input-output {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: var(--vp-c-bg);
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.io-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.io-label {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.io-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.svg-placeholder {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.svg-placeholder.green {
|
||||
background-color: #48bb78;
|
||||
}
|
||||
|
||||
.svg-placeholder.blue {
|
||||
background-color: #667eea;
|
||||
}
|
||||
|
||||
.svg-text {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.probability {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.examples h6 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.example-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.schools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
|
||||
@media (max-width: 640px) { .schools-grid { grid-template-columns: 1fr; } }
|
||||
.school-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-top: 3px solid; border-radius: 6px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
|
||||
.card-head { display: flex; align-items: center; gap: 0.5rem; }
|
||||
.school-icon { font-size: 1.3rem; }
|
||||
.school-name { font-weight: bold; font-size: 0.9rem; }
|
||||
.school-idea { font-size: 0.78rem; color: var(--vp-c-text-1); background: var(--vp-c-bg-alt); padding: 0.35rem 0.5rem; border-radius: 4px; }
|
||||
.school-rep { font-size: 0.72rem; color: var(--vp-c-text-3); }
|
||||
.school-status { font-size: 0.72rem; color: var(--vp-c-text-2); border-top: 1px dashed var(--vp-c-divider); padding-top: 0.35rem; }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="demo-card">
|
||||
<div class="events">
|
||||
<div class="event" v-for="e in events" :key="e.year">
|
||||
<div class="year-col">
|
||||
<span class="year-badge">{{ e.year }}</span>
|
||||
</div>
|
||||
<div class="dot-col">
|
||||
<div class="dot" :style="{ background: e.color }"></div>
|
||||
<div class="line" v-if="e !== events[events.length - 1]"></div>
|
||||
</div>
|
||||
<div class="content-col">
|
||||
<div class="event-title">{{ e.title }}</div>
|
||||
<div class="event-note">{{ e.note }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const events = [
|
||||
{ year: '1943', title: 'MP 神经元模型', note: '麦卡洛克 & 皮茨：首次用数学公式模拟神经元，证明"神经元可被计算"。', color: '#3b82f6' },
|
||||
{ year: '1950', title: '图灵测试', note: '图灵：如果机器的回答让人无法分辨是人还是机器，则认为它具备智能。', color: '#7c3aed' },
|
||||
{ year: '1956', title: '达特茅斯会议 — AI 学科诞生', note: '麦卡锡等人首次提出"人工智能"概念，AI 正式成为一门学科。', color: '#059669' },
|
||||
{ year: '1956', title: '逻辑理论家（Logic Theorist）', note: '纽厄尔 & 西蒙：第一个用规则自动证明数学定理的 AI 程序。', color: '#059669' },
|
||||
{ year: '1958', title: 'LISP 语言诞生', note: '麦卡锡发明，成为此后数十年 AI 研究的核心编程语言。', color: '#d97706' },
|
||||
{ year: '1959', title: '首台工业机器人', note: '德沃尔 & 恩格尔伯格：AI 从实验室走向工厂，开始改变工业生产。', color: '#dc2626' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.events { display: flex; flex-direction: column; }
|
||||
.event { display: grid; grid-template-columns: 52px 24px 1fr; gap: 0 0.6rem; }
|
||||
.year-col { display: flex; align-items: flex-start; padding-top: 0.15rem; justify-content: flex-end; }
|
||||
.year-badge { font-size: 0.7rem; font-weight: bold; color: var(--vp-c-text-3); white-space: nowrap; }
|
||||
.dot-col { display: flex; flex-direction: column; align-items: center; }
|
||||
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 0.2rem; }
|
||||
.line { width: 2px; flex: 1; background: var(--vp-c-divider); margin: 3px 0; min-height: 16px; }
|
||||
.content-col { padding-bottom: 0.9rem; }
|
||||
.event-title { font-weight: bold; font-size: 0.85rem; color: var(--vp-c-text-1); margin-bottom: 0.15rem; }
|
||||
.event-note { font-size: 0.78rem; color: var(--vp-c-text-2); line-height: 1.5; }
|
||||
</style>
|
||||
@@ -1,293 +1,40 @@
|
||||
<template>
|
||||
<div class="gpt-evolution-demo">
|
||||
<el-card
|
||||
shadow="hover"
|
||||
class="main-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="title">🚀 GPT 进化历程</span>
|
||||
<span class="subtitle">从 GPT-1 到 GPT-4 的演进之路</span>
|
||||
<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 class="card-top">
|
||||
<span class="gpt-name" :style="{ color: m.color }">{{ m.name }}</span>
|
||||
<span class="gpt-year">{{ m.year }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="demo-content">
|
||||
<!-- Replace Vertical Timeline with Horizontal Tabs -->
|
||||
<el-tabs
|
||||
v-model="activeModelName"
|
||||
type="card"
|
||||
class="evolution-tabs"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(model, index) in gptModels"
|
||||
:key="index"
|
||||
:label="model.name"
|
||||
:name="model.name"
|
||||
>
|
||||
<div class="model-view">
|
||||
<div class="model-info-header">
|
||||
<el-tag
|
||||
effect="dark"
|
||||
size="large"
|
||||
>
|
||||
{{ model.year }}
|
||||
</el-tag>
|
||||
<div class="model-stats">
|
||||
<div class="stat-item">
|
||||
<span class="label">参数量</span>
|
||||
<span class="value">{{ model.parameters }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="label">上下文</span>
|
||||
<span class="value">{{ model.context }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="model-description">
|
||||
<p>{{ model.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="model-milestones">
|
||||
<span class="section-label">🎯 关键能力:</span>
|
||||
<div class="tags-container">
|
||||
<el-tag
|
||||
v-for="(milestone, i) in model.milestones"
|
||||
:key="i"
|
||||
size="small"
|
||||
class="milestone-tag"
|
||||
>
|
||||
{{ milestone }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-divider class="compact-divider">
|
||||
进化趋势
|
||||
</el-divider>
|
||||
|
||||
<div class="evolution-insight">
|
||||
<div class="insight-row">
|
||||
<div class="insight-item">
|
||||
<el-icon><TrendCharts /></el-icon>
|
||||
<div class="insight-text">
|
||||
<span class="label">参数量增长</span>
|
||||
<span class="value">10000倍+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
<el-icon><ChatDotSquare /></el-icon>
|
||||
<div class="insight-text">
|
||||
<span class="label">对话能力</span>
|
||||
<span class="value">单轮 → 多轮</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
<el-icon><Cpu /></el-icon>
|
||||
<div class="insight-text">
|
||||
<span class="label">逻辑推理</span>
|
||||
<span class="value">弱 → 强</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="param-val">{{ m.params }}</div>
|
||||
<div class="param-bar-bg">
|
||||
<div class="param-bar" :style="{ width: m.barWidth, background: m.color }"></div>
|
||||
</div>
|
||||
<div class="gpt-key">{{ m.key }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { TrendCharts, ChatDotSquare, Cpu } from '@element-plus/icons-vue'
|
||||
|
||||
const activeModelName = ref('GPT-1')
|
||||
|
||||
const gptModels = [
|
||||
{
|
||||
name: 'GPT-1',
|
||||
year: '2018',
|
||||
parameters: '1.17 亿',
|
||||
paramDetail: '117 Million',
|
||||
context: '512 tokens',
|
||||
contextDetail: '约 1 页文本',
|
||||
capability: '无监督预训练',
|
||||
description: '开创性地使用了 Transformer 解码器进行预训练，证明了无监督学习在 NLP 中的潜力。',
|
||||
milestones: ['预训练+微调范式', 'BookCorpus 数据集', '单向 Transformer']
|
||||
},
|
||||
{
|
||||
name: 'GPT-2',
|
||||
year: '2019',
|
||||
parameters: '15 亿',
|
||||
paramDetail: '1.5 Billion',
|
||||
context: '1024 tokens',
|
||||
contextDetail: '约 2 页文本',
|
||||
capability: '零样本任务',
|
||||
description: '参数量扩大 10 倍，展示了惊人的零样本（Zero-shot）能力，能生成连贯的文本。',
|
||||
milestones: ['WebText 数据集', 'Zero-shot Learning', '生成长文本']
|
||||
},
|
||||
{
|
||||
name: 'GPT-3',
|
||||
year: '2020',
|
||||
parameters: '1750 亿',
|
||||
paramDetail: '175 Billion',
|
||||
context: '2048 tokens',
|
||||
contextDetail: '约 4 页文本',
|
||||
capability: '上下文学习 (ICL)',
|
||||
description: '参数量爆炸式增长，涌现出上下文学习能力（In-Context Learning），无需微调即可完成任务。',
|
||||
milestones: ['Few-shot Learning', 'Common Crawl', '能力涌现']
|
||||
},
|
||||
{
|
||||
name: 'GPT-4',
|
||||
year: '2023',
|
||||
parameters: '1.8 万亿 (推测)',
|
||||
paramDetail: '1.8 Trillion (Est.)',
|
||||
context: '128k tokens',
|
||||
contextDetail: '约 300 页书',
|
||||
capability: '多模态 & 推理',
|
||||
description: '引入多模态能力（识图），逻辑推理和代码能力大幅提升，支持超长上下文。',
|
||||
milestones: ['多模态输入', 'MoE 架构', 'RLHF 对齐', '考试高手']
|
||||
}
|
||||
const models = [
|
||||
{ name: 'GPT-1', year: '2018', params: '1.17 亿', barWidth: '2%', color: '#94a3b8', key: '预训练+微调范式确立' },
|
||||
{ name: 'GPT-2', year: '2019', params: '15 亿', barWidth: '6%', color: '#3b82f6', key: 'Zero-shot 零样本泛化' },
|
||||
{ name: 'GPT-3', year: '2020', params: '1750 亿', barWidth: '45%', color: '#7c3aed', key: '⚡ 涌现！上下文学习' },
|
||||
{ name: 'GPT-4', year: '2023', params: '~1.8 万亿', barWidth: '100%', color: '#dc2626', key: '多模态 + 复杂推理' },
|
||||
]
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
// activeModelName updated automatically
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gpt-evolution-demo {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* Compact Tabs */
|
||||
.evolution-tabs :deep(.el-tabs__header) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.model-view {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.model-info-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.model-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-item .label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.stat-item .value {
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.model-description {
|
||||
background-color: #f5f7fa;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.model-milestones {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.milestone-tag {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.compact-divider {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.evolution-insight {
|
||||
background-color: #f0f9eb;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.insight-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.insight-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.insight-text .label {
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.insight-text .value {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.insight-row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.gpt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
|
||||
@media (max-width: 640px) { .gpt-grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
.gpt-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-top: 3px solid; border-radius: 6px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
|
||||
.card-top { display: flex; justify-content: space-between; }
|
||||
.gpt-name { font-weight: bold; font-size: 0.88rem; }
|
||||
.gpt-year { font-size: 0.68rem; color: var(--vp-c-text-3); }
|
||||
.param-val { font-size: 0.78rem; font-weight: bold; font-family: monospace; color: var(--vp-c-text-1); }
|
||||
.param-bar-bg { height: 6px; background: var(--vp-c-bg-alt); border-radius: 3px; overflow: hidden; }
|
||||
.param-bar { height: 100%; border-radius: 3px; min-width: 3px; }
|
||||
.gpt-key { font-size: 0.7rem; color: var(--vp-c-brand-1); background: var(--vp-c-brand-soft); padding: 0.15rem 0.4rem; border-radius: 3px; }
|
||||
</style>
|
||||
+43
-409
@@ -1,424 +1,58 @@
|
||||
<template>
|
||||
<div class="nn-viz-demo">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>神经网络：手动前向传播（可控演示）</h4>
|
||||
<p class="subtitle">
|
||||
用"开始 / 上一步 / 下一步"逐层推进，避免误把动画当成真实训练过程。
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="controls mb-4 flex gap-2">
|
||||
<el-button-group>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="step !== 0"
|
||||
@click="start"
|
||||
>
|
||||
开始
|
||||
</el-button>
|
||||
<el-button
|
||||
:disabled="step <= 1"
|
||||
@click="prev"
|
||||
>
|
||||
上一步
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="step === 0 || step >= maxStep"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</el-button>
|
||||
<el-button @click="reset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<div class="demo-card">
|
||||
<div class="net-layout">
|
||||
<div class="svg-wrap">
|
||||
<svg viewBox="0 0 380 200" class="net-svg">
|
||||
<line v-for="c in connections" :key="c.id" :x1="c.x1" :y1="c.y1" :x2="c.x2" :y2="c.y2" stroke="#94a3b8" stroke-width="1.2" opacity="0.35" />
|
||||
<g v-for="layer in layers" :key="layer.idx">
|
||||
<circle v-for="n in layer.nodes" :key="n.id" :cx="n.x" :cy="n.y" r="15" :fill="layer.fill" :stroke="layer.stroke" stroke-width="2" />
|
||||
</g>
|
||||
<text v-for="layer in layers" :key="'l-'+layer.idx" :x="layer.x" y="194" text-anchor="middle" :fill="layer.stroke" class="lbl">{{ layer.name }}</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="step > 0"
|
||||
class="progress mb-4"
|
||||
>
|
||||
<el-steps
|
||||
:active="step"
|
||||
align-center
|
||||
finish-status="success"
|
||||
>
|
||||
<el-step title="输入层" />
|
||||
<el-step title="隐藏层" />
|
||||
<el-step title="输出层" />
|
||||
</el-steps>
|
||||
<div class="step-info text-center mt-2 text-sm text-gray-500">
|
||||
Step {{ step }} / {{ maxStep }} · {{ stepTitle }}
|
||||
<div class="layer-cards">
|
||||
<div class="layer-card" v-for="info in layerInfo" :key="info.name" :style="{ borderLeftColor: info.color }">
|
||||
<div class="lc-title" :style="{ color: info.color }">{{ info.name }}</div>
|
||||
<div class="lc-desc">{{ info.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-layout">
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="viz-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-title">
|
||||
网络结构
|
||||
</div>
|
||||
</template>
|
||||
<div class="network-container">
|
||||
<svg
|
||||
class="network-svg"
|
||||
:viewBox="`0 0 ${svgWidth} ${svgHeight}`"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="conn"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
:style="{
|
||||
stopColor: 'var(--el-color-primary)',
|
||||
stopOpacity: 0.18
|
||||
}"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
:style="{
|
||||
stopColor: 'var(--el-color-primary)',
|
||||
stopOpacity: 0.45
|
||||
}"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<g class="connections">
|
||||
<line
|
||||
v-for="c in connections"
|
||||
:key="c.id"
|
||||
:x1="c.x1"
|
||||
:y1="c.y1"
|
||||
:x2="c.x2"
|
||||
:y2="c.y2"
|
||||
:class="{
|
||||
active: isConnectionActive(c),
|
||||
focus: isConnectionFocus(c)
|
||||
}"
|
||||
class="connection-line"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<g class="neurons">
|
||||
<g
|
||||
v-for="n in neurons"
|
||||
:key="n.id"
|
||||
:transform="`translate(${n.x}, ${n.y})`"
|
||||
:class="{
|
||||
neuron: true,
|
||||
active: isNeuronActive(n),
|
||||
focus: focusLayer === n.layer
|
||||
}"
|
||||
@click="focusLayer = n.layer"
|
||||
>
|
||||
<circle :r="n.r" />
|
||||
<text
|
||||
v-if="n.label"
|
||||
y="32"
|
||||
text-anchor="middle"
|
||||
class="neuron-label"
|
||||
>
|
||||
{{ n.label }}
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
title="提示：点击某一层的神经元可以“聚焦”该层（仅用于查看，不会触发自动流程）。"
|
||||
type="info"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="mt-2"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="info-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-title">
|
||||
每一层在做什么
|
||||
</div>
|
||||
</template>
|
||||
<div class="layers-info">
|
||||
<el-collapse v-model="activeCollapse">
|
||||
<el-collapse-item
|
||||
v-for="(l, idx) in layerConfigs"
|
||||
:key="l.name"
|
||||
:title="l.name"
|
||||
:name="idx"
|
||||
>
|
||||
<div class="layer-detail">
|
||||
<p>{{ l.desc }}</p>
|
||||
<div class="math-box">
|
||||
<code>{{ l.math }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
const svgWidth = 600
|
||||
const svgHeight = 300
|
||||
const step = ref(0)
|
||||
const maxStep = 3
|
||||
const focusLayer = ref(null)
|
||||
const activeCollapse = ref([0])
|
||||
|
||||
// Mock logic for demo
|
||||
const layerConfigs = [
|
||||
{
|
||||
name: '输入层 (Input)',
|
||||
desc: '接收原始数据（如图片的像素值）。',
|
||||
math: 'x = [x1, x2, x3]'
|
||||
},
|
||||
{
|
||||
name: '隐藏层 (Hidden)',
|
||||
desc: '提取特征（如边缘、形状）。每个神经元计算加权和并激活。',
|
||||
math: 'h = ReLU(W1·x + b1)'
|
||||
},
|
||||
{
|
||||
name: '输出层 (Output)',
|
||||
desc: '给出最终结果（如分类概率）。',
|
||||
math: 'y = Softmax(W2·h + b2)'
|
||||
}
|
||||
const W = 380, H = 185
|
||||
const layerDef = [
|
||||
{ name: '输入层', count: 3, xFrac: 0.13, color: '#3b82f6', fill: '#dbeafe' },
|
||||
{ name: '隐藏层', count: 4, xFrac: 0.5, color: '#7c3aed', fill: '#ede9fe' },
|
||||
{ name: '输出层', count: 2, xFrac: 0.87, color: '#059669', fill: '#d1fae5' },
|
||||
]
|
||||
|
||||
const neurons = ref([])
|
||||
const connections = ref([])
|
||||
|
||||
const stepTitle = computed(() => {
|
||||
if (step.value === 0) return '准备就绪'
|
||||
if (step.value === 1) return '输入数据进入网络'
|
||||
if (step.value === 2) return '隐藏层提取特征'
|
||||
if (step.value === 3) return '输出层得出结果'
|
||||
return ''
|
||||
const layers = layerDef.map((l, idx) => {
|
||||
const x = l.xFrac * W
|
||||
const gap = Math.min(46, (H - 36) / (l.count - 1 || 1))
|
||||
const startY = (H - gap * (l.count - 1)) / 2
|
||||
return { idx, x, name: l.name, fill: l.fill, stroke: l.color, nodes: Array.from({ length: l.count }, (_, i) => ({ id: `${idx}-${i}`, x, y: startY + i * gap })) }
|
||||
})
|
||||
|
||||
const initNetwork = () => {
|
||||
// Simple layout logic
|
||||
const layers = [3, 4, 2] // Neuron counts per layer
|
||||
const layerX = [100, 300, 500]
|
||||
const ns = []
|
||||
const cs = []
|
||||
|
||||
layers.forEach((count, layerIdx) => {
|
||||
const startY = (svgHeight - (count - 1) * 60) / 2
|
||||
for (let i = 0; i < count; i++) {
|
||||
ns.push({
|
||||
id: `n-${layerIdx}-${i}`,
|
||||
layer: layerIdx,
|
||||
x: layerX[layerIdx],
|
||||
y: startY + i * 60,
|
||||
r: 20,
|
||||
label: layerIdx === 0 ? `x${i + 1}` : layerIdx === 2 ? `y${i + 1}` : ''
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Create connections
|
||||
ns.forEach((src) => {
|
||||
ns.forEach((tgt) => {
|
||||
if (tgt.layer === src.layer + 1) {
|
||||
cs.push({
|
||||
id: `c-${src.id}-${tgt.id}`,
|
||||
srcId: src.id,
|
||||
tgtId: tgt.id,
|
||||
srcLayer: src.layer,
|
||||
x1: src.x,
|
||||
y1: src.y,
|
||||
x2: tgt.x,
|
||||
y2: tgt.y
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
neurons.value = ns
|
||||
connections.value = cs
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initNetwork()
|
||||
})
|
||||
|
||||
const start = () => {
|
||||
step.value = 1
|
||||
focusLayer.value = 0
|
||||
activeCollapse.value = [0]
|
||||
}
|
||||
|
||||
const next = () => {
|
||||
if (step.value < maxStep) {
|
||||
step.value++
|
||||
focusLayer.value = step.value - 1
|
||||
activeCollapse.value = [step.value - 1]
|
||||
}
|
||||
}
|
||||
|
||||
const prev = () => {
|
||||
if (step.value > 1) {
|
||||
step.value--
|
||||
focusLayer.value = step.value - 1
|
||||
activeCollapse.value = [step.value - 1]
|
||||
}
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
step.value = 0
|
||||
focusLayer.value = null
|
||||
activeCollapse.value = [0]
|
||||
}
|
||||
|
||||
const isNeuronActive = (n) => {
|
||||
if (step.value === 0) return false
|
||||
return n.layer < step.value
|
||||
}
|
||||
|
||||
const isConnectionActive = (c) => {
|
||||
if (step.value === 0) return false
|
||||
return c.srcLayer < step.value - 1
|
||||
}
|
||||
|
||||
const isConnectionFocus = (c) => {
|
||||
// Optional: highlight connections related to focused layer
|
||||
return false
|
||||
const connections = []
|
||||
for (let li = 0; li < layers.length - 1; li++) {
|
||||
layers[li].nodes.forEach(a => { layers[li + 1].nodes.forEach(b => { connections.push({ id: `${a.id}-${b.id}`, x1: a.x, y1: a.y, x2: b.x, y2: b.y }) }) })
|
||||
}
|
||||
const layerInfo = [
|
||||
{ name: '输入层', desc: '原始像素 / 数值信号', color: '#3b82f6' },
|
||||
{ name: '隐藏层（可叠加多层）', desc: '底层识别边缘 → 中层识别形状 → 高层识别语义概念', color: '#7c3aed' },
|
||||
{ name: '输出层', desc: '最终分类或预测结果', color: '#059669' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nn-viz-demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.grid-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.network-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.network-svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.connection-line {
|
||||
stroke: var(--vp-c-divider);
|
||||
stroke-width: 2;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.connection-line.active {
|
||||
stroke: var(--el-color-primary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.neuron circle {
|
||||
fill: var(--vp-c-bg);
|
||||
stroke: var(--vp-c-text-2);
|
||||
stroke-width: 2;
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.neuron.active circle {
|
||||
fill: var(--el-color-primary-light-9);
|
||||
stroke: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.neuron.focus circle {
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.neuron-label {
|
||||
font-size: 12px;
|
||||
fill: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.math-box {
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.net-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.9rem; }
|
||||
@media (max-width: 600px) { .net-layout { grid-template-columns: 1fr; } }
|
||||
.svg-wrap { display: flex; align-items: center; justify-content: center; background: var(--vp-c-bg-alt); border-radius: 6px; }
|
||||
.net-svg { width: 100%; height: auto; }
|
||||
.lbl { font-size: 9px; font-weight: bold; }
|
||||
.layer-cards { display: flex; flex-direction: column; gap: 0.4rem; justify-content: center; }
|
||||
.layer-card { border-left: 3px solid; padding: 0.5rem 0.7rem; background: var(--vp-c-bg-alt); border-radius: 0 5px 5px 0; }
|
||||
.lc-title { font-weight: bold; font-size: 0.78rem; margin-bottom: 0.15rem; }
|
||||
.lc-desc { font-size: 0.73rem; color: var(--vp-c-text-2); line-height: 1.4; }
|
||||
</style>
|
||||
|
||||
@@ -1,288 +1,71 @@
|
||||
<template>
|
||||
<div class="perceptron-demo">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>感知机 (Perceptron) 演示</h4>
|
||||
<p class="subtitle">
|
||||
最简单的神经元：输入 x 权重 + 偏置 = 输出
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="neuron-viz-container">
|
||||
<!-- Inputs -->
|
||||
<div class="col inputs-col">
|
||||
<div class="node-wrapper">
|
||||
<el-tag effect="dark">
|
||||
输入 A
|
||||
</el-tag>
|
||||
<el-input-number
|
||||
v-model="x1"
|
||||
size="small"
|
||||
:step="1"
|
||||
/>
|
||||
</div>
|
||||
<div class="node-wrapper">
|
||||
<el-tag effect="dark">
|
||||
输入 B
|
||||
</el-tag>
|
||||
<el-input-number
|
||||
v-model="x2"
|
||||
size="small"
|
||||
:step="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weights Visual -->
|
||||
<div class="col weights-col">
|
||||
<div class="weight-group">
|
||||
<div
|
||||
class="weight-line"
|
||||
:style="{
|
||||
height: Math.abs(w1) * 2 + 2 + 'px',
|
||||
opacity: Math.abs(w1) / 5 + 0.2
|
||||
}"
|
||||
/>
|
||||
<div class="weight-control">
|
||||
<span class="label">权重 A: {{ w1 }}</span>
|
||||
<el-slider
|
||||
v-model="w1"
|
||||
:min="-5"
|
||||
:max="5"
|
||||
:step="0.1"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="weight-group">
|
||||
<div
|
||||
class="weight-line"
|
||||
:style="{
|
||||
height: Math.abs(w2) * 2 + 2 + 'px',
|
||||
opacity: Math.abs(w2) / 5 + 0.2
|
||||
}"
|
||||
/>
|
||||
<div class="weight-control">
|
||||
<span class="label">权重 B: {{ w2 }}</span>
|
||||
<el-slider
|
||||
v-model="w2"
|
||||
:min="-5"
|
||||
:max="5"
|
||||
:step="0.1"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Neuron Body -->
|
||||
<div class="col neuron-col">
|
||||
<div class="neuron-circle">
|
||||
<div class="sum-symbol">
|
||||
总分
|
||||
</div>
|
||||
<div class="sum-value">
|
||||
{{ weightedSum.toFixed(1) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bias-control mt-2">
|
||||
<span class="label">基础分 (Bias):</span>
|
||||
<el-input-number
|
||||
v-model="bias"
|
||||
size="small"
|
||||
:step="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Output -->
|
||||
<div class="col output-col">
|
||||
<el-icon class="arrow-icon">
|
||||
<Right />
|
||||
</el-icon>
|
||||
<div class="node-wrapper">
|
||||
<el-tag
|
||||
:type="output > 0 ? 'success' : 'info'"
|
||||
effect="dark"
|
||||
>
|
||||
结果 (Output)
|
||||
</el-tag>
|
||||
<div
|
||||
class="output-value"
|
||||
:class="{ active: output > 0 }"
|
||||
>
|
||||
{{ output }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-card">
|
||||
<div class="perceptron-layout">
|
||||
<div class="inputs-col">
|
||||
<div class="input-node" v-for="inp in inputs" :key="inp.label">
|
||||
<span class="node-circle">{{ inp.val }}</span>
|
||||
<span class="node-label">{{ inp.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="formula-bar">
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
>
|
||||
<template #title>
|
||||
<div class="formula-content">
|
||||
<div>
|
||||
<strong>总分计算: </strong>
|
||||
<span class="calc-step">
|
||||
(输入A {{ x1 }} × 权重 {{ w1 }}) + (输入B {{ x2 }} × 权重 {{ w2 }}) + 基础分 {{ bias }} =
|
||||
{{ weightedSum.toFixed(1) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<strong>判断结果: </strong>
|
||||
<span class="calc-step">
|
||||
{{ weightedSum.toFixed(1) }} {{ weightedSum > 0 ? '>' : '≤' }} 0
|
||||
→ 输出 {{ output }} ({{ output > 0 ? '激活' : '静默' }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
<div class="weights-col">
|
||||
<div class="weight-arrow" v-for="inp in inputs" :key="inp.label">
|
||||
<span class="arrow">→</span>
|
||||
<span class="w-tag">×{{ inp.weight }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<div class="neuron-col">
|
||||
<div class="neuron-circle">
|
||||
<div class="n-sym">Σ</div>
|
||||
<div class="n-val">{{ sum }}</div>
|
||||
</div>
|
||||
<span class="bias-tag">偏置 {{ bias }}</span>
|
||||
</div>
|
||||
<div class="act-col">
|
||||
<span class="arrow big">→</span>
|
||||
<div class="act-box">sum > 0 ?</div>
|
||||
<span class="arrow big">→</span>
|
||||
</div>
|
||||
<div class="output-col">
|
||||
<div class="output-node" :class="{ on: output === 1 }">
|
||||
<span class="out-val">{{ output }}</span>
|
||||
<span class="out-lbl">{{ output ? '激活' : '静默' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
① 输入特征 ② 乘以权重（重要性） ③ 求和 + 偏置 ④ 超过阈值就激活输出 1，否则输出 0
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { Right } from '@element-plus/icons-vue'
|
||||
|
||||
const x1 = ref(1)
|
||||
const x2 = ref(0)
|
||||
const w1 = ref(2.0)
|
||||
const w2 = ref(-1.0)
|
||||
const bias = ref(0)
|
||||
|
||||
const weightedSum = computed(() => {
|
||||
return x1.value * w1.value + x2.value * w2.value + bias.value
|
||||
})
|
||||
|
||||
const output = computed(() => {
|
||||
return weightedSum.value > 0 ? 1 : 0
|
||||
})
|
||||
import { computed } from 'vue'
|
||||
const inputs = [{ label: '特征 x₁', val: 1, weight: 0.6 }, { label: '特征 x₂', val: 0, weight: 0.4 }]
|
||||
const bias = -0.3
|
||||
const sum = computed(() => Number((inputs.reduce((s, i) => s + i.val * i.weight, 0) + bias).toFixed(2)))
|
||||
const output = computed(() => sum.value > 0 ? 1 : 0)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.perceptron-demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.neuron-viz-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.node-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.weight-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.weight-line {
|
||||
width: 100%;
|
||||
background-color: var(--el-color-primary);
|
||||
height: 2px;
|
||||
min-height: 2px;
|
||||
}
|
||||
|
||||
.weight-control {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.neuron-circle {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--el-color-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.sum-symbol {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sum-value {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.output-value.active {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.formula-content code {
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.perceptron-layout { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 1.2rem 0.8rem; flex-wrap: wrap; }
|
||||
.inputs-col, .weights-col, .neuron-col, .act-col, .output-col { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
|
||||
.input-node { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
|
||||
.node-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; background: var(--vp-c-brand-soft); border: 2px solid var(--vp-c-brand); color: var(--vp-c-brand-1); }
|
||||
.node-label { font-size: 0.62rem; color: var(--vp-c-text-2); }
|
||||
.weight-arrow { display: flex; align-items: center; gap: 0.3rem; }
|
||||
.arrow { color: var(--vp-c-text-3); font-size: 1.1rem; }
|
||||
.arrow.big { font-size: 1.4rem; }
|
||||
.w-tag { font-size: 0.72rem; font-weight: bold; font-family: monospace; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); padding: 0.1rem 0.4rem; border-radius: 4px; color: var(--vp-c-brand-1); }
|
||||
.neuron-circle { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--vp-c-brand); background: var(--vp-c-bg-alt); display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.n-sym { font-size: 1.2rem; font-weight: bold; color: var(--vp-c-brand); }
|
||||
.n-val { font-size: 0.8rem; font-weight: bold; font-family: monospace; }
|
||||
.bias-tag { font-size: 0.62rem; color: var(--vp-c-text-3); padding: 0.1rem 0.4rem; border: 1px dashed var(--vp-c-divider); border-radius: 4px; }
|
||||
.act-col { flex-direction: row; }
|
||||
.act-box { font-size: 0.72rem; font-family: monospace; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.4rem 0.6rem; }
|
||||
.output-node { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--vp-c-divider); background: var(--vp-c-bg-alt); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; }
|
||||
.output-node.on { border-color: #059669; background: rgba(5,150,105,0.08); }
|
||||
.out-val { font-size: 1.3rem; font-weight: bold; }
|
||||
.out-lbl { font-size: 0.58rem; color: var(--vp-c-text-2); }
|
||||
.caption { font-size: 0.75rem; color: var(--vp-c-text-3); text-align: center; margin-top: 0.6rem; }
|
||||
</style>
|
||||
|
||||
@@ -1,361 +1,49 @@
|
||||
<template>
|
||||
<div class="rule-learning-demo">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h4>规则 vs 学习</h4>
|
||||
<p class="subtitle">
|
||||
对比：你写阈值 (规则) vs 让模型从数据里"推断"阈值 (学习)
|
||||
</p>
|
||||
<div class="demo-card">
|
||||
<div class="demo-header">
|
||||
<span class="title">关键发展路径总结</span>
|
||||
</div>
|
||||
<div class="path-flow">
|
||||
<div class="path-item" v-for="(item, i) in path" :key="i">
|
||||
<div class="path-card" :style="{ borderLeftColor: item.color }">
|
||||
<div class="path-top">
|
||||
<span class="path-icon" :style="{ background: item.color }">{{ i + 1 }}</span>
|
||||
<div>
|
||||
<div class="path-name">{{ item.name }}</div>
|
||||
<div class="path-years">{{ item.years }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="path-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- Rule Based -->
|
||||
<el-col
|
||||
:xs="24"
|
||||
:md="12"
|
||||
class="mb-4-xs"
|
||||
>
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="panel-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="panel-title">
|
||||
规则系统（手写 If/Else）
|
||||
</div>
|
||||
</template>
|
||||
<div class="panel-content">
|
||||
<div class="control-row">
|
||||
<span class="label">阈值 size ></span>
|
||||
<el-input-number
|
||||
v-model="ruleThreshold"
|
||||
:min="1"
|
||||
:max="10"
|
||||
size="small"
|
||||
/>
|
||||
<span class="text-xs text-gray">（必须明确写出）</span>
|
||||
</div>
|
||||
|
||||
<div class="control-row mt-4">
|
||||
<span class="label">测试输入 size</span>
|
||||
<el-slider
|
||||
v-model="testInput"
|
||||
:min="1"
|
||||
:max="10"
|
||||
show-input
|
||||
input-size="small"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="result-box mt-4"
|
||||
:class="{
|
||||
good: ruleResult.label === '🍎',
|
||||
bad: ruleResult.label === '🍒'
|
||||
}"
|
||||
>
|
||||
<div class="result-title">
|
||||
输出
|
||||
</div>
|
||||
<div class="result-value">
|
||||
{{ ruleResult.text }}
|
||||
</div>
|
||||
<div class="result-code">
|
||||
if (size > {{ ruleThreshold }}) return 🍎 else return 🍒
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
title="当环境变化（比如'苹果平均变小了'），你需要手动改规则；规则越多，维护成本越高。"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
class="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- Machine Learning -->
|
||||
<el-col
|
||||
:xs="24"
|
||||
:md="12"
|
||||
>
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="panel-card"
|
||||
>
|
||||
<template #header>
|
||||
<div class="panel-title">
|
||||
机器学习（从样本推断边界）
|
||||
</div>
|
||||
</template>
|
||||
<div class="panel-content">
|
||||
<div class="control-row">
|
||||
<el-input-number
|
||||
v-model="newSize"
|
||||
:min="1"
|
||||
:max="10"
|
||||
size="small"
|
||||
placeholder="Size"
|
||||
/>
|
||||
<el-select
|
||||
v-model="newLabel"
|
||||
size="small"
|
||||
placeholder="Label"
|
||||
style="width: 120px"
|
||||
>
|
||||
<el-option
|
||||
label="🍒 樱桃"
|
||||
value="🍒"
|
||||
/>
|
||||
<el-option
|
||||
label="🍎 苹果"
|
||||
value="🍎"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="addSample"
|
||||
>
|
||||
添加样本
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="samples-area mt-4">
|
||||
<el-empty
|
||||
v-if="trainingData.length === 0"
|
||||
description="还没有样本：先添加 2-4 个样本再训练"
|
||||
:image-size="40"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="sample-chips"
|
||||
>
|
||||
<el-tag
|
||||
v-for="(p, i) in trainingData"
|
||||
:key="p.id"
|
||||
closable
|
||||
:type="p.label === '🍎' ? 'danger' : 'info'"
|
||||
effect="plain"
|
||||
@close="removeSample(i)"
|
||||
>
|
||||
{{ p.size }} → {{ p.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions mt-4 flex gap-2">
|
||||
<el-button
|
||||
type="success"
|
||||
:disabled="trainingData.length < 2"
|
||||
@click="train"
|
||||
>
|
||||
训练（推断阈值）
|
||||
</el-button>
|
||||
<el-button @click="resetLearning">
|
||||
重置
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="learnedThreshold !== null"
|
||||
class="learned-result mt-4"
|
||||
>
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
show-icon
|
||||
title="学习完成！"
|
||||
>
|
||||
<p>
|
||||
模型推断出阈值应为: <strong>{{ learnedThreshold }}</strong>
|
||||
</p>
|
||||
<p class="text-xs">
|
||||
(大于 {{ learnedThreshold }} 是苹果，否则是樱桃)
|
||||
</p>
|
||||
</el-alert>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<div v-if="i < path.length - 1" class="path-connector">
|
||||
<svg width="20" height="24" viewBox="0 0 20 24"><path d="M10 0 L10 18 L5 13 M10 18 L15 13" fill="none" stroke="var(--vp-c-text-3)" stroke-width="1.5" stroke-linecap="round" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
// Rule Based Logic
|
||||
const ruleThreshold = ref(5)
|
||||
const testInput = ref(6)
|
||||
|
||||
const ruleResult = computed(() => {
|
||||
if (testInput.value > ruleThreshold.value) {
|
||||
return { label: '🍎', text: '🍎 苹果' }
|
||||
} else {
|
||||
return { label: '🍒', text: '🍒 樱桃' }
|
||||
}
|
||||
})
|
||||
|
||||
// ML Logic
|
||||
const newSize = ref(5)
|
||||
const newLabel = ref('🍎')
|
||||
const trainingData = ref([
|
||||
{ id: 1, size: 2, label: '🍒' },
|
||||
{ id: 2, size: 8, label: '🍎' }
|
||||
])
|
||||
const learnedThreshold = ref(null)
|
||||
|
||||
const addSample = () => {
|
||||
trainingData.value.push({
|
||||
id: Date.now(),
|
||||
size: newSize.value,
|
||||
label: newLabel.value
|
||||
})
|
||||
}
|
||||
|
||||
const removeSample = (index) => {
|
||||
trainingData.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const resetLearning = () => {
|
||||
trainingData.value = []
|
||||
learnedThreshold.value = null
|
||||
}
|
||||
|
||||
const train = () => {
|
||||
// Simple "training": find the boundary between cherry and apple
|
||||
// Sort data by size
|
||||
const sorted = [...trainingData.value].sort((a, b) => a.size - b.size)
|
||||
|
||||
// Find the first Apple
|
||||
const firstAppleIndex = sorted.findIndex((item) => item.label === '🍎')
|
||||
|
||||
if (firstAppleIndex === -1) {
|
||||
// All cherries
|
||||
learnedThreshold.value = 10
|
||||
} else if (firstAppleIndex === 0) {
|
||||
// All apples
|
||||
learnedThreshold.value = 0
|
||||
} else {
|
||||
// Boundary is between last cherry and first apple
|
||||
const lastCherry = sorted[firstAppleIndex - 1]
|
||||
const firstApple = sorted[firstAppleIndex]
|
||||
learnedThreshold.value = (lastCherry.size + firstApple.size) / 2
|
||||
}
|
||||
}
|
||||
const path = [
|
||||
{ name: '理论奠基', years: '1940s-1950s', desc: '图灵测试、达特茅斯会议，符号主义诞生', color: '#3b82f6' },
|
||||
{ name: '符号主义主导', years: '1960s-1980s', desc: '专家系统兴起与两次 AI 寒冬', color: '#059669' },
|
||||
{ name: '机器学习转型', years: '1990s-2000s', desc: '统计方法取代规则，连接主义复苏', color: '#d97706' },
|
||||
{ name: '深度学习革命', years: '2010s', desc: 'AlexNet、AlphaGo、Transformer 架构，连接主义成为主流', color: '#dc2626' },
|
||||
{ name: '大模型时代', years: '2018 至今', desc: 'GPT 系列、多模态融合，通用智能曙光初现', color: '#7c3aed' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rule-learning-demo {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.card-header h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.control-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.mb-4-xs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.mb-4-xs {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.result-box {
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-box.good {
|
||||
border-color: var(--el-color-danger);
|
||||
background-color: var(--el-color-danger-light-9);
|
||||
}
|
||||
|
||||
.result-box.bad {
|
||||
border-color: var(--el-color-primary);
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-2);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.result-code {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sample-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
|
||||
.demo-header { margin-bottom: 1rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.path-flow { display: flex; flex-direction: column; align-items: stretch; }
|
||||
.path-item { display: flex; flex-direction: column; align-items: center; }
|
||||
.path-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-left: 4px solid; border-radius: 0 8px 8px 0; padding: 0.8rem 1rem; width: 100%; }
|
||||
.path-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.35rem; }
|
||||
.path-icon { width: 24px; height: 24px; border-radius: 50%; color: white; font-size: 0.72rem; font-weight: bold; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.path-name { font-weight: bold; font-size: 0.9rem; color: var(--vp-c-text-1); }
|
||||
.path-years { font-size: 0.72rem; color: var(--vp-c-text-3); font-weight: bold; }
|
||||
.path-desc { font-size: 0.8rem; color: var(--vp-c-text-2); line-height: 1.4; padding-left: 2.2rem; }
|
||||
.path-connector { display: flex; justify-content: center; padding: 0.15rem 0; }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,895 @@
|
||||
<template>
|
||||
<div class="a2a-detailed-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">A2A 内部实现</span>
|
||||
<span class="subtitle">对等网络架构的通信细节</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-section">
|
||||
<div class="section-title">A2A 可以做什么？</div>
|
||||
<p class="intro-text">
|
||||
A2A 让多个 AI Agent 可以相互协作，不再是单打独斗。一个复杂任务可以分配给多个专业 Agent，每个 Agent 做自己擅长的事。
|
||||
</p>
|
||||
<div class="popular-uses">
|
||||
<div class="use-item">
|
||||
<div class="use-title">软件开发流水线</div>
|
||||
<div class="use-desc">需求分析 Agent → 代码 Agent → 测试 Agent → 部署 Agent</div>
|
||||
</div>
|
||||
<div class="use-item">
|
||||
<div class="use-title">多厂商 Agent 集成</div>
|
||||
<div class="use-desc">Google、Anthropic、OpenAI 的 Agent 可以相互调用</div>
|
||||
</div>
|
||||
<div class="use-item">
|
||||
<div class="use-title">企业工作流</div>
|
||||
<div class="use-desc">HR Agent、财务 Agent、审批 Agent 协同处理业务流程</div>
|
||||
</div>
|
||||
<div class="use-item">
|
||||
<div class="use-title">智能客服升级</div>
|
||||
<div class="use-desc">接待 Agent → 业务 Agent → 人工 Agent 逐级转接</div>
|
||||
</div>
|
||||
<div class="use-item">
|
||||
<div class="use-title">科研协作</div>
|
||||
<div class="use-desc">文献 Agent → 实验 Agent → 分析 Agent → 报告 Agent</div>
|
||||
</div>
|
||||
<div class="use-item">
|
||||
<div class="use-title">自动化运维</div>
|
||||
<div class="use-desc">监控 Agent → 诊断 Agent → 修复 Agent → 通知 Agent</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="usage-section">
|
||||
<div class="section-title">如何使用 A2A？</div>
|
||||
<p class="usage-intro">
|
||||
A2A 目前还在早期阶段，主要由 Google 推动。如果你想尝试 A2A，需要开发支持 A2A 协议的 Agent 服务。
|
||||
</p>
|
||||
|
||||
<div class="usage-steps">
|
||||
<div class="usage-step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">实现 Agent Card 端点</div>
|
||||
<div class="step-desc">
|
||||
在你的 Agent 服务中暴露 <code>/.well-known/agent.json</code>，声明 Agent 的能力和版本
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="usage-step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">实现 A2A API</div>
|
||||
<div class="step-desc">
|
||||
实现 <code>agents/get</code>、<code>tasks/send</code>、<code>tasks/get</code> 等核心 API
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="usage-step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">部署并注册 Agent</div>
|
||||
<div class="step-desc">
|
||||
将 Agent 部署到服务器，并在 Agent 注册表中登记，让其他 Agent 可以发现它
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="usage-note">
|
||||
<div class="note-title">当前状态</div>
|
||||
<div class="note-content">
|
||||
A2A 协议于 2025 年 4 月发布，目前还在快速发展中。Google 提供了参考实现，但生态还在建设中。建议关注 <a href="https://google.github.io/A2A" target="_blank">官方文档</a> 获取最新进展。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="flow-section">
|
||||
<div class="flow-title">
|
||||
|
||||
通信流程（5 步）
|
||||
</div>
|
||||
|
||||
<div class="flow-steps">
|
||||
<div
|
||||
v-for="(step, index) in a2aFlowSteps"
|
||||
:key="index"
|
||||
class="flow-step-item"
|
||||
>
|
||||
<div class="step-header" @click="toggleStep(index)">
|
||||
<span class="step-num">{{ index + 1 }}</span>
|
||||
<span class="step-name">{{ step.name }}</span>
|
||||
<span class="step-arrow">{{ expandedStep === index ? '▼' : '▶' }}</span>
|
||||
</div>
|
||||
<div v-if="expandedStep === index" class="step-detail">
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
<div class="step-example">
|
||||
<div class="example-title">{{ step.example.title }}</div>
|
||||
<pre class="example-code"><code>{{ step.example.code }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<details class="tech-details">
|
||||
<summary class="tech-summary">
|
||||
|
||||
<span class="summary-text">技术深究：Agent Card 名片格式</span>
|
||||
</summary>
|
||||
<div class="tech-content">
|
||||
<div class="tech-intro">
|
||||
Agent Card 是一个 JSON 文件，通常放在 <code>/.well-known/agent.json</code> 路径
|
||||
</div>
|
||||
<div class="tech-section">
|
||||
<div class="tech-title">Agent Card 示例</div>
|
||||
<pre class="tech-code"><code>{{ agentCardExample }}</code></pre>
|
||||
</div>
|
||||
<div class="tech-note">
|
||||
|
||||
<span>通过 Agent Card，Agent 之间可以相互发现，了解对方的能力和版本，实现互操作</span>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="tech-details">
|
||||
<summary class="tech-summary">
|
||||
|
||||
<span class="summary-text">技术深究：HTTP + SSE 通信</span>
|
||||
</summary>
|
||||
<div class="tech-content">
|
||||
<div class="tech-section">
|
||||
<div class="tech-title">任务发送（HTTP POST）</div>
|
||||
<pre class="tech-code"><code>{{ taskSendExample }}</code></pre>
|
||||
</div>
|
||||
<div class="tech-section">
|
||||
<div class="tech-title">实时推送（SSE）</div>
|
||||
<pre class="tech-code"><code>{{ sseExample }}</code></pre>
|
||||
</div>
|
||||
<div class="tech-note">
|
||||
<span>SSE（Server-Sent Events）允许服务器主动推送消息，适合长时任务的状态更新</span>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="tech-details">
|
||||
<summary class="tech-summary">
|
||||
|
||||
<span class="summary-text">技术深究：A2A 核心 API</span>
|
||||
</summary>
|
||||
<div class="tech-content">
|
||||
<div class="api-list">
|
||||
<div v-for="(api, index) in a2aApis" :key="index" class="api-item">
|
||||
<div class="api-method">
|
||||
<span class="method-badge">{{ api.method }}</span>
|
||||
<span class="method-name">{{ api.name }}</span>
|
||||
</div>
|
||||
<div class="api-desc">{{ api.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="tech-details">
|
||||
<summary class="tech-summary">
|
||||
|
||||
<span class="summary-text">技术深究：认证机制</span>
|
||||
</summary>
|
||||
<div class="tech-content">
|
||||
<div class="auth-grid">
|
||||
<div class="auth-card">
|
||||
<div class="auth-header">
|
||||
|
||||
<span class="auth-name">API Key</span>
|
||||
</div>
|
||||
<div class="auth-desc">
|
||||
简单的认证方式，适合内部 Agent 通信
|
||||
</div>
|
||||
<pre class="auth-example"><code>{{ apiKeyExample }}</code></pre>
|
||||
</div>
|
||||
<div class="auth-card">
|
||||
<div class="auth-header">
|
||||
|
||||
<span class="auth-name">OAuth 2.0</span>
|
||||
</div>
|
||||
<div class="auth-desc">
|
||||
企业级认证，支持令牌刷新和权限控制
|
||||
</div>
|
||||
<pre class="auth-example"><code>{{ oauthExample }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const expandedStep = ref(0)
|
||||
|
||||
const toggleStep = (index) => {
|
||||
expandedStep.value = expandedStep.value === index ? -1 : index
|
||||
}
|
||||
|
||||
const a2aFlowSteps = [
|
||||
{
|
||||
name: '发现（agents/get）',
|
||||
desc: 'Agent 之间通过 HTTP 请求获取对方的 Agent Card，了解对方的能力和版本',
|
||||
example: {
|
||||
title: 'HTTP 请求',
|
||||
code: `// Agent A 获取 Agent B 的 Agent Card
|
||||
GET /.well-known/agent.json HTTP/1.1
|
||||
Host: agent-b.company.com
|
||||
|
||||
// 响应
|
||||
{
|
||||
"name": "Code Agent",
|
||||
"description": "专业代码生成 Agent",
|
||||
"url": "https://agent-b.company.com",
|
||||
"version": "1.0.0",
|
||||
"capabilities": {
|
||||
"streaming": true,
|
||||
"pushNotifications": true
|
||||
},
|
||||
"skills": [
|
||||
{"id": "code-gen", "name": "代码生成"},
|
||||
{"id": "code-review", "name": "代码审查"}
|
||||
]
|
||||
}`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '发任务（tasks/send）',
|
||||
desc: 'Agent A 调用 tasks/send 向 Agent B 发送任务，包含任务ID、描述、上下文等',
|
||||
example: {
|
||||
title: 'HTTP POST',
|
||||
code: `// Agent A 发送任务给 Agent B
|
||||
POST /tasks/send HTTP/1.1
|
||||
Content-Type: application/json
|
||||
Authorization: Bearer xxx
|
||||
|
||||
{
|
||||
"id": "task-12345",
|
||||
"sessionId": "session-001",
|
||||
"message": {
|
||||
"role": "user",
|
||||
"parts": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "请帮我写一个登录 API"
|
||||
},
|
||||
{
|
||||
"type": "resource",
|
||||
"resource": "file:///specs/login.yaml"
|
||||
}
|
||||
]
|
||||
}
|
||||
}`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '执行（Task Processing）',
|
||||
desc: 'Agent B 接收任务后，可能调用自己的 LLM 或 MCP 工具来执行任务',
|
||||
example: {
|
||||
title: 'Agent B 内部处理',
|
||||
code: `// Agent B 内部处理流程
|
||||
1. 解析任务请求
|
||||
2. 分析需要的技能（从 skills 中匹配）
|
||||
3. 调用内部 LLM 生成代码
|
||||
4. 可选：通过 MCP 调用外部工具验证代码
|
||||
5. 生成最终结果
|
||||
|
||||
// 整个过程可能耗时较长，通过 SSE 推送进度`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '推送（SSE）',
|
||||
desc: 'Agent B 通过 SSE（Server-Sent Events）实时推送任务进度和中间结果',
|
||||
example: {
|
||||
title: 'SSE 推送',
|
||||
code: `// 服务器持续推送
|
||||
event: taskProgress
|
||||
data: {
|
||||
"taskId": "task-12345",
|
||||
"status": "processing",
|
||||
"progress": 30,
|
||||
"message": "正在生成登录逻辑..."
|
||||
}
|
||||
|
||||
event: taskProgress
|
||||
data: {
|
||||
"taskId": "task-12345",
|
||||
"status": "processing",
|
||||
"progress": 60,
|
||||
"message": "正在生成数据库操作..."
|
||||
}
|
||||
|
||||
event: taskCompleted
|
||||
data: {
|
||||
"taskId": "task-12345",
|
||||
"status": "completed",
|
||||
"result": { ... }
|
||||
}`
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '返回结果（tasks/get）',
|
||||
desc: '任务完成后，Agent A 可以通过 tasks/get 获取最终结果',
|
||||
example: {
|
||||
title: 'HTTP GET',
|
||||
code: `// Agent A 获取任务结果
|
||||
GET /tasks/task-12345 HTTP/1.1
|
||||
Authorization: Bearer xxx
|
||||
|
||||
// 响应
|
||||
{
|
||||
"id": "task-12345",
|
||||
"status": "completed",
|
||||
"result": {
|
||||
"message": {
|
||||
"role": "agent",
|
||||
"parts": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "登录 API 已生成..."
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"file": {
|
||||
"name": "login.py",
|
||||
"mimeType": "text/plain",
|
||||
"uri": "file:///generated/login.py"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const agentCardExample = `{
|
||||
"name": "代码生成 Agent",
|
||||
"description": "专业的前后端代码生成 Agent",
|
||||
"url": "https://code-agent.company.com",
|
||||
"version": "1.0.0",
|
||||
"capabilities": {
|
||||
"streaming": true,
|
||||
"pushNotifications": true
|
||||
},
|
||||
"skills": [
|
||||
{
|
||||
"id": "frontend",
|
||||
"name": "前端开发",
|
||||
"description": "React/Vue/Angular"
|
||||
},
|
||||
{
|
||||
"id": "backend",
|
||||
"name": "后端开发",
|
||||
"description": "Node/Python/Go"
|
||||
}
|
||||
],
|
||||
"authentication": {
|
||||
"schemes": ["Bearer", "OAuth2"]
|
||||
}
|
||||
}`
|
||||
|
||||
const taskSendExample = `POST /tasks/send HTTP/1.1
|
||||
Host: agent-b.company.com
|
||||
Content-Type: application/json
|
||||
Authorization: Bearer {token}
|
||||
|
||||
{
|
||||
"id": "task-001",
|
||||
"message": {
|
||||
"role": "user",
|
||||
"parts": [{ "type": "text", "text": "写一个登录接口" }]
|
||||
}
|
||||
}`
|
||||
|
||||
const sseExample = `GET /tasks/task-001/sse HTTP/1.1
|
||||
Authorization: Bearer {token}
|
||||
|
||||
event: progress
|
||||
data: {"status": "processing", "progress": 50}
|
||||
|
||||
event: completed
|
||||
data: {"status": "completed", "result": {...}}`
|
||||
|
||||
const a2aApis = [
|
||||
{ method: 'GET', name: 'agents/get', desc: '获取指定 Agent 的 Agent Card，了解其能力' },
|
||||
{ method: 'POST', name: 'tasks/send', desc: '发送任务给目标 Agent，同步等待结果' },
|
||||
{ method: 'POST', name: 'tasks/sendSubscribe', desc: '发送任务并订阅 SSE 推送，实时获取进度' },
|
||||
{ method: 'GET', name: 'tasks/get', desc: '根据任务 ID 获取任务状态和结果' },
|
||||
{ method: 'GET', name: 'tasks/cancel', desc: '取消正在执行的任务' }
|
||||
]
|
||||
|
||||
const apiKeyExample = `Authorization: Bearer sk-xxxxx
|
||||
# 或
|
||||
Authorization: ApiKey sk-xxxxx`
|
||||
|
||||
const oauthExample = `Authorization: Bearer {access_token}
|
||||
# 支持刷新令牌
|
||||
POST /oauth/token
|
||||
{
|
||||
"grant_type": "refresh_token",
|
||||
"refresh_token": "xxx"
|
||||
}`
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.a2a-detailed-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.flow-section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flow-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.flow-step-item {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
background: var(--vp-c-bg-soft);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.step-header:hover {
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-name {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.step-arrow {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.step-detail {
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.step-example {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.example-title {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.example-code {
|
||||
font-size: 0.7rem;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tech-details {
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tech-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
cursor: pointer;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tech-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.summary-icon {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tech-content {
|
||||
padding: 0.75rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.tech-intro {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tech-intro code {
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.tech-section {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.tech-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.tech-code {
|
||||
font-size: 0.7rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tech-note {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.note-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.api-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.api-item {
|
||||
padding: 0.4rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.api-method {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.method-badge {
|
||||
font-size: 0.6rem;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.method-name {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.api-desc {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.auth-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.auth-icon {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.auth-name {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.auth-desc {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.auth-example pre {
|
||||
font-size: 0.65rem;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.4rem;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.auth-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.intro-section .section-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.intro-section .intro-text {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.popular-uses {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.use-item {
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.use-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.use-desc {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.popular-uses {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.usage-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.usage-section .section-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.usage-intro {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.usage-intro code {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.usage-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.usage-step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.usage-step .step-num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.usage-step .step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.usage-step .step-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.usage-step .step-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.usage-step .step-desc code {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.usage-note {
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.note-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.note-content {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.note-content a {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="a2a-visual-demo">
|
||||
<div class="section-title">A2A 是什么？</div>
|
||||
|
||||
<div class="intro-text">
|
||||
A2A（Agent-to-Agent Protocol）是 Google 于 2025 年 4 月推出的<strong>Agent 之间相互协作的通信标准</strong>。它让不同厂商、不同框架的 Agent 能够相互发现、分配任务、交换信息，就像给 AI 世界装上了"对讲机"。
|
||||
</div>
|
||||
|
||||
<div class="section-title">核心概念</div>
|
||||
|
||||
<div class="concepts-grid">
|
||||
<div class="concept">
|
||||
<div class="concept-title">Agent Card（Agent 名片）</div>
|
||||
<div class="concept-desc">每个 Agent 公开的元数据，包括能力描述、版本号、端点地址等，相当于人的"名片"</div>
|
||||
</div>
|
||||
<div class="concept">
|
||||
<div class="concept-title">Task（任务）</div>
|
||||
<div class="concept-desc">Agent 之间传递的工作单元，可以包含多轮对话、文件附件等</div>
|
||||
</div>
|
||||
<div class="concept">
|
||||
<div class="concept-title">Message（消息）</div>
|
||||
<div class="concept-desc">Agent 之间的通信内容，支持文本、文件、语音等多模态</div>
|
||||
</div>
|
||||
<div class="concept">
|
||||
<div class="concept-title">SSE（Server-Sent Events）</div>
|
||||
<div class="concept-desc">服务器推送技术，用于实时任务进度更新</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">什么时候用 A2A？</div>
|
||||
|
||||
<div class="use-cases">
|
||||
<div class="use-case">
|
||||
<div class="use-case-title">当需要多个 Agent 协作完成复杂任务时</div>
|
||||
<div class="use-case-desc">一个 Agent 负责需求分析，一个负责写代码，一个负责测试，各自发挥专长</div>
|
||||
</div>
|
||||
<div class="use-case">
|
||||
<div class="use-case-title">当需要集成不同厂商的 Agent 时</div>
|
||||
<div class="use-case-desc">Google 的 Agent、Anthropic 的 Agent、OpenAI 的 Agent 需要相互协作</div>
|
||||
</div>
|
||||
<div class="use-case">
|
||||
<div class="use-case-title">当需要任务委托和进度追踪时</div>
|
||||
<div class="use-case-desc">主 Agent 分配任务给专家 Agent，并实时接收进度更新</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">如何使用 A2A？</div>
|
||||
|
||||
<div class="usage-steps">
|
||||
<div class="step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">发布 Agent Card</div>
|
||||
<div class="step-desc">在 /.well-known/agent.json 路径暴露 Agent 的能力描述</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">发现 Agent</div>
|
||||
<div class="step-desc">通过 agents/get API 获取其他 Agent 的名片，了解其能力</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">发送任务</div>
|
||||
<div class="step-desc">通过 tasks/send API 发送任务，支持 SSE 接收进度更新</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">获取结果</div>
|
||||
<div class="step-desc">任务完成后，通过 tasks/get API 获取最终结果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.a2a-visual-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1.25rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.intro-text strong {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.concepts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.concept {
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.concept-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.concept-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.use-cases {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.use-case {
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.use-case-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.use-case-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.usage-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.concepts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="mcp-visual-demo">
|
||||
<div class="section-title">MCP 是什么？</div>
|
||||
|
||||
<div class="intro-text">
|
||||
MCP（Model Context Protocol）是 Anthropic 于 2024 年 11 月推出的<strong>AI 与外部工具连接的统一标准</strong>。它让 AI 应用可以调用外部工具、读取资源数据、使用预定义提示，就像给 AI 装上了"手"和"眼睛"。
|
||||
</div>
|
||||
|
||||
<div class="section-title">三大核心能力</div>
|
||||
|
||||
<div class="能力-table">
|
||||
<div class="table-header">
|
||||
<div class="col-能力">能力</div>
|
||||
<div class="col-英文">英文</div>
|
||||
<div class="col-作用">作用</div>
|
||||
<div class="col-示例">示例</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="col-能力"><strong>工具</strong></div>
|
||||
<div class="col-英文">Tools</div>
|
||||
<div class="col-作用">AI 可以调用的功能</div>
|
||||
<div class="col-示例">查询天气、发送邮件、调用 API</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="col-能力"><strong>资源</strong></div>
|
||||
<div class="col-英文">Resources</div>
|
||||
<div class="col-作用">AI 可以读取的数据</div>
|
||||
<div class="col-示例">文件内容、数据库记录、配置信息</div>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<div class="col-能力"><strong>提示</strong></div>
|
||||
<div class="col-英文">Prompts</div>
|
||||
<div class="col-作用">预定义的提示模板</div>
|
||||
<div class="col-示例">代码审查模板、写作模板</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">什么时候用 MCP？</div>
|
||||
|
||||
<div class="use-cases">
|
||||
<div class="use-case">
|
||||
<div class="use-case-title">当 AI 需要执行实际操作时</div>
|
||||
<div class="use-case-desc">AI 不仅要回答问题，还要真正做事：发送邮件、操作文件、调用第三方 API</div>
|
||||
</div>
|
||||
<div class="use-case">
|
||||
<div class="use-case-title">当 AI 需要访问私有数据时</div>
|
||||
<div class="use-case-desc">读取本地文件、查询数据库、访问企业内部系统</div>
|
||||
</div>
|
||||
<div class="use-case">
|
||||
<div class="use-case-title">当需要标准化工具接入时</div>
|
||||
<div class="use-case-desc">一次开发，多个 AI 应用可用（Claude、Cursor、Windsurf 等）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">如何使用 MCP？</div>
|
||||
|
||||
<div class="usage-steps">
|
||||
<div class="step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">开发 MCP Server</div>
|
||||
<div class="step-desc">按 MCP 规范实现 Server，提供 tools/resources/prompts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">配置 AI 应用连接</div>
|
||||
<div class="step-desc">在 AI 应用中添加 MCP Server 配置（本地或远程）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">AI 自动调用</div>
|
||||
<div class="step-desc">AI 根据任务需求，自动发现并调用合适的工具或读取资源</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mcp-visual-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1.25rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.intro-text strong {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.能力-table {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.col-能力 {
|
||||
width: 15%;
|
||||
padding: 0.5rem 0.6rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.col-英文 {
|
||||
width: 18%;
|
||||
padding: 0.5rem 0.6rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.col-作用 {
|
||||
width: 32%;
|
||||
padding: 0.5rem 0.6rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.col-示例 {
|
||||
width: 35%;
|
||||
padding: 0.5rem 0.6rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.use-cases {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.use-case {
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.use-case-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.use-case-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.usage-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.table-header,
|
||||
.table-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.col-能力,
|
||||
.col-英文,
|
||||
.col-作用,
|
||||
.col-示例 {
|
||||
width: 100%;
|
||||
padding: 0.35rem 0.6rem;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.col-能力 {
|
||||
font-size: 0.85rem;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.col-英文 {
|
||||
font-size: 0.75rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.col-作用 {
|
||||
font-size: 0.8rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.col-示例 {
|
||||
font-size: 0.75rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="protocol-comparison-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">MCP vs A2A</span>
|
||||
<span class="subtitle">AI Agent 两大协议的定位差异</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
想象你在一个<span class="highlight">大型商场</span>：MCP 就像商场的"统一插座标准"，让各种电器（工具）都能插上使用；A2A 就像商场的"内部对讲系统"，让不同店铺（Agent）之间可以协作。
|
||||
</div>
|
||||
|
||||
<div class="protocol-cards">
|
||||
<div class="protocol-card mcp">
|
||||
<div class="card-header">
|
||||
<span class="card-title">MCP</span>
|
||||
<span class="card-badge">工具连接</span>
|
||||
</div>
|
||||
<div class="card-fullname">Model Context Protocol</div>
|
||||
<div class="card-desc">
|
||||
AI 与外部工具、数据源的连接协议，让工具开发者写一次代码，所有 AI 应用都能用
|
||||
</div>
|
||||
<div class="card-meta">
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">发起方</span>
|
||||
<span class="meta-value">Anthropic</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">发布时间</span>
|
||||
<span class="meta-value">2024.11</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">架构</span>
|
||||
<span class="meta-value">Client-Server</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">数据格式</span>
|
||||
<span class="meta-value">JSON-RPC 2.0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-analogy">
|
||||
<span class="analogy-label">类比</span>
|
||||
<span class="analogy-text">USB-C 接口 —— 统一各种设备的充电方式</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="protocol-card a2a">
|
||||
<div class="card-header">
|
||||
<span class="card-title">A2A</span>
|
||||
<span class="card-badge">Agent协作</span>
|
||||
</div>
|
||||
<div class="card-fullname">Agent-to-Agent Protocol</div>
|
||||
<div class="card-desc">
|
||||
Agent 之间的通信协议，让不同厂商、不同框架的 Agent 能够无缝协作
|
||||
</div>
|
||||
<div class="card-meta">
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">发起方</span>
|
||||
<span class="meta-value">Google</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">发布时间</span>
|
||||
<span class="meta-value">2025.04</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">架构</span>
|
||||
<span class="meta-value">Peer-to-Peer</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">数据格式</span>
|
||||
<span class="meta-value">HTTP + JSON</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-analogy">
|
||||
<span class="analogy-label">类比</span>
|
||||
<span class="analogy-text">企业微信 —— 让同事之间可以发任务、聊天</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>MCP 和 A2A 不是竞争关系，而是互补关系。MCP 解决"AI 如何获取外部能力"，A2A 解决"多个 AI 如何协作"。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.protocol-comparison-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.intro-text .highlight {
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.protocol-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.protocol-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.protocol-card.mcp {
|
||||
border-left: 3px solid #3b82f6;
|
||||
}
|
||||
|
||||
.protocol-card.a2a {
|
||||
border-left: 3px solid #10b981;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.card-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.protocol-card.mcp .card-badge {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.protocol-card.a2a .card-badge {
|
||||
background: rgba(16, 185, 129, 0.2);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.card-fullname {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.6rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-analogy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.4rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.analogy-label {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.analogy-text {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.protocol-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div class="protocol-workflow-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">MCP + A2A 协作流程</span>
|
||||
<span class="subtitle">两者如何配合完成复杂任务</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
想象你要<span class="highlight">装修房子</span>：你需要设计师（主 Agent）出方案，工人（专家 Agent）施工，还要从建材市场（工具）买材料。A2A 让设计师和工人能协作，MCP 让工人能买到材料。
|
||||
</div>
|
||||
|
||||
<div class="workflow-diagram">
|
||||
<div class="user-node">
|
||||
<span class="node-label">用户</span>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="agent-node main">
|
||||
<span class="node-label">主 Agent</span>
|
||||
<span class="node-role">需求分析</span>
|
||||
</div>
|
||||
<div class="arrow">→</div>
|
||||
<div class="a2a-badge">
|
||||
<span class="badge-text">A2A</span>
|
||||
</div>
|
||||
<div class="agent-node expert">
|
||||
<span class="node-label">专家 Agent</span>
|
||||
<span class="node-role">执行任务</span>
|
||||
</div>
|
||||
<div class="arrow">↔</div>
|
||||
<div class="mcp-badge">
|
||||
<span class="badge-text">MCP</span>
|
||||
</div>
|
||||
<div class="tool-node">
|
||||
<span class="node-label">外部工具</span>
|
||||
<span class="node-role">API/数据库</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-steps">
|
||||
<div class="flow-step">
|
||||
<span class="step-num">1</span>
|
||||
<span class="step-text">用户向主 Agent 提出需求（如"分析这个 GitHub 仓库"）</span>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<span class="step-num">2</span>
|
||||
<span class="step-text">主 Agent 通过 <strong>A2A</strong> 委托专家 Agent 执行任务</span>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<span class="step-num">3</span>
|
||||
<span class="step-text">专家 Agent 通过 <strong>MCP</strong> 调用外部工具获取数据</span>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<span class="step-num">4</span>
|
||||
<span class="step-text">专家 Agent 通过 <strong>A2A</strong> 返回结果给主 Agent</span>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<span class="step-num">5</span>
|
||||
<span class="step-text">主 Agent 汇总结果，回复用户</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot a2a"></span>
|
||||
<span class="legend-text"><strong>A2A</strong>：Agent ↔ Agent 通信</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot mcp"></span>
|
||||
<span class="legend-text"><strong>MCP</strong>：Agent ↔ 工具 通信</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>A2A 负责 Agent 之间的任务分配和协作，MCP 负责 Agent 与外部工具的交互，两者各司其职，互补协作。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.protocol-workflow-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.intro-text .highlight {
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.workflow-diagram {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.user-node,
|
||||
.agent-node,
|
||||
.tool-node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.user-node {
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.agent-node.main {
|
||||
border: 2px solid var(--vp-c-brand);
|
||||
background: rgba(100, 108, 255, 0.1);
|
||||
}
|
||||
|
||||
.agent-node.expert {
|
||||
border: 2px solid #10b981;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.tool-node {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.node-role {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.a2a-badge,
|
||||
.mcp-badge {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.a2a-badge {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.a2a-badge .badge-icon {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.a2a-badge .badge-text {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.mcp-badge {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.mcp-badge .badge-icon {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.mcp-badge .badge-text {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 700;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.step-text strong {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend-dot.a2a {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.legend-dot.mcp {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.legend-text strong {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.workflow-diagram {
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div class="raf-root">
|
||||
<div class="raf-layout">
|
||||
<!-- Left: Client Side -->
|
||||
<div class="raf-left">
|
||||
<div class="raf-header">
|
||||
<span class="raf-icon">💻</span>
|
||||
<span class="raf-title">Client (Browser/App)</span>
|
||||
</div>
|
||||
|
||||
<div class="raf-controls">
|
||||
<div class="raf-scenarios">
|
||||
<button
|
||||
v-for="s in scenarios"
|
||||
:key="s.id"
|
||||
:class="['raf-chip', { active: currentScenario.id === s.id }]"
|
||||
@click="selectScenario(s)"
|
||||
:disabled="processing"
|
||||
>
|
||||
{{ s.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="raf-request-box">
|
||||
<div class="raf-http-line">
|
||||
<span :class="['raf-method', currentScenario.method]">{{ currentScenario.method }}</span>
|
||||
<span class="raf-url">{{ currentScenario.url }}</span>
|
||||
</div>
|
||||
<div v-if="currentScenario.body" class="raf-code-block">
|
||||
{{ JSON.stringify(currentScenario.body, null, 2) }}
|
||||
</div>
|
||||
<button
|
||||
class="raf-send-btn"
|
||||
@click="sendRequest"
|
||||
:disabled="processing"
|
||||
>
|
||||
{{ processing ? 'Sending...' : 'Send Request' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="raf-response-box" v-if="response">
|
||||
<div class="raf-status-line">
|
||||
<span class="raf-label">Response Status:</span>
|
||||
<span :class="['raf-status-badge', getStatusColor(response.status)]">
|
||||
{{ response.status }} {{ response.statusText }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="raf-code-block response-body">
|
||||
{{ JSON.stringify(response.body, null, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Server Side -->
|
||||
<div class="raf-right">
|
||||
<div class="raf-header server-header">
|
||||
<span class="raf-icon">☁️</span>
|
||||
<span class="raf-title">Server (API)</span>
|
||||
</div>
|
||||
|
||||
<div class="raf-server-state">
|
||||
<!-- Database View -->
|
||||
<div class="raf-section">
|
||||
<div class="raf-section-title">📦 Database (Users Resource)</div>
|
||||
<div class="raf-db-view">
|
||||
<transition-group name="list">
|
||||
<div v-for="user in db" :key="user.id" class="raf-db-item">
|
||||
<span class="raf-db-id">ID: {{ user.id }}</span>
|
||||
<span class="raf-db-name">{{ user.name }}</span>
|
||||
<span class="raf-db-role">({{ user.role }})</span>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div v-if="db.length === 0" class="raf-empty">No users found</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logs -->
|
||||
<div class="raf-section">
|
||||
<div class="raf-section-title">📜 Server Logs</div>
|
||||
<div class="raf-logs" ref="logsRef">
|
||||
<div v-for="(log, i) in logs" :key="i" class="raf-log-line">
|
||||
<span class="raf-log-time">[{{ log.time }}]</span>
|
||||
<span :class="log.type">{{ log.msg }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, nextTick } from 'vue'
|
||||
|
||||
const processing = ref(false)
|
||||
const response = ref(null)
|
||||
const logs = ref([])
|
||||
const logsRef = ref(null)
|
||||
|
||||
const db = ref([
|
||||
{ id: 1, name: "Alice", role: "admin" },
|
||||
{ id: 2, name: "Bob", role: "user" }
|
||||
])
|
||||
|
||||
const scenarios = [
|
||||
{ id: 'get-all', label: 'GET /users', method: 'GET', url: '/api/users', body: null },
|
||||
{ id: 'get-one', label: 'GET /users/1', method: 'GET', url: '/api/users/1', body: null },
|
||||
{ id: 'create', label: 'POST /users', method: 'POST', url: '/api/users', body: { name: "Charlie", role: "user" } },
|
||||
{ id: 'not-found', label: 'GET /users/99', method: 'GET', url: '/api/users/99', body: null },
|
||||
{ id: 'delete', label: 'DELETE /users/1', method: 'DELETE', url: '/api/users/1', body: null },
|
||||
]
|
||||
|
||||
const currentScenario = ref(scenarios[0])
|
||||
|
||||
function selectScenario(s) {
|
||||
currentScenario.value = s
|
||||
response.value = null
|
||||
}
|
||||
|
||||
function addLog(msg, type = 'info') {
|
||||
const now = new Date()
|
||||
const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
|
||||
logs.value.push({ time, msg, type })
|
||||
nextTick(() => {
|
||||
if (logsRef.value) logsRef.value.scrollTop = logsRef.value.scrollHeight
|
||||
})
|
||||
}
|
||||
|
||||
function getStatusColor(status) {
|
||||
if (status >= 200 && status < 300) return 'status-success'
|
||||
if (status >= 400 && status < 500) return 'status-error'
|
||||
return 'status-neutral'
|
||||
}
|
||||
|
||||
async function sendRequest() {
|
||||
processing.value = true
|
||||
response.value = null
|
||||
addLog(`Received ${currentScenario.value.method} ${currentScenario.value.url}`, 'info')
|
||||
|
||||
await new Promise(r => setTimeout(r, 600)) // Simulate network latency
|
||||
|
||||
const { method, url, body } = currentScenario.value
|
||||
|
||||
// Router Logic Simulation
|
||||
if (method === 'GET' && url === '/api/users') {
|
||||
response.value = { status: 200, statusText: 'OK', body: db.value }
|
||||
addLog('Matched route: GET /users -> listUsers()', 'success')
|
||||
}
|
||||
else if (method === 'GET' && url.match(/\/api\/users\/\d+/)) {
|
||||
const id = parseInt(url.split('/').pop())
|
||||
const user = db.value.find(u => u.id === id)
|
||||
if (user) {
|
||||
response.value = { status: 200, statusText: 'OK', body: user }
|
||||
addLog(`Found user ${id}`, 'success')
|
||||
} else {
|
||||
response.value = { status: 404, statusText: 'Not Found', body: { error: "User not found" } }
|
||||
addLog(`User ${id} not found in DB`, 'error')
|
||||
}
|
||||
}
|
||||
else if (method === 'POST' && url === '/api/users') {
|
||||
const newUser = { id: Math.max(0, ...db.value.map(u => u.id)) + 1, ...body }
|
||||
db.value.push(newUser)
|
||||
response.value = { status: 201, statusText: 'Created', body: newUser }
|
||||
addLog(`Created user ${newUser.id}`, 'success')
|
||||
}
|
||||
else if (method === 'DELETE' && url.match(/\/api\/users\/\d+/)) {
|
||||
const id = parseInt(url.split('/').pop())
|
||||
const idx = db.value.findIndex(u => u.id === id)
|
||||
if (idx !== -1) {
|
||||
db.value.splice(idx, 1)
|
||||
response.value = { status: 204, statusText: 'No Content', body: null }
|
||||
addLog(`Deleted user ${id}`, 'success')
|
||||
} else {
|
||||
response.value = { status: 404, statusText: 'Not Found', body: { error: "User not found" } }
|
||||
addLog(`User ${id} not found for deletion`, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
processing.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.raf-root {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 1rem 0;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.raf-layout {
|
||||
display: flex;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.raf-left, .raf-right {
|
||||
flex: 1;
|
||||
padding: 1.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.raf-left {
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.raf-right {
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.raf-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.raf-scenarios {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.raf-chip {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.raf-chip:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.raf-chip.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.raf-request-box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.raf-http-line {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
font-family: monospace;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.raf-method {
|
||||
font-weight: bold;
|
||||
}
|
||||
.raf-method.GET { color: #61affe; }
|
||||
.raf-method.POST { color: #49cc90; }
|
||||
.raf-method.DELETE { color: #f93e3e; }
|
||||
|
||||
.raf-code-block {
|
||||
background: var(--vp-c-bg);
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.raf-send-btn {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.raf-send-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.raf-send-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.raf-response-box {
|
||||
margin-top: auto;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 1rem;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.raf-status-line {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.raf-status-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.status-success { background: #d1fae5; color: #065f46; }
|
||||
.status-error { background: #fee2e2; color: #991b1b; }
|
||||
.status-neutral { background: #f3f4f6; color: #374151; }
|
||||
|
||||
.raf-db-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.raf-db-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.raf-db-id { color: var(--vp-c-text-3); font-family: monospace; }
|
||||
.raf-db-name { font-weight: bold; }
|
||||
.raf-db-role { color: var(--vp-c-brand); font-size: 0.9em; }
|
||||
|
||||
.raf-logs {
|
||||
height: 180px;
|
||||
overflow-y: auto;
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.raf-log-line {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.raf-log-time { color: #6b7280; flex-shrink: 0; }
|
||||
.info { color: #93c5fd; }
|
||||
.success { color: #86efac; }
|
||||
.error { color: #fca5a5; }
|
||||
|
||||
.raf-section-title {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.raf-section:first-child .raf-section-title { margin-top: 0; }
|
||||
|
||||
.raf-empty {
|
||||
color: var(--vp-c-text-3);
|
||||
font-style: italic;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.raf-layout { flex-direction: column; }
|
||||
.raf-left { border-right: none; border-bottom: 1px solid var(--vp-c-divider); }
|
||||
}
|
||||
</style>
|
||||
@@ -2,69 +2,75 @@
|
||||
<div class="adder-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">加法器：用逻辑门做二进制加法</span>
|
||||
<span class="subtitle">点击蓝色位按钮切换 0/1，观察进位如何逐位传递</span>
|
||||
<span class="subtitle">就像手算竖式：从个位往高位算，逢二进一，进位往左传</span>
|
||||
</div>
|
||||
|
||||
<!-- 名词解释 -->
|
||||
<div class="legend">
|
||||
<span class="legend-item"><span class="dot a" />A = 被加数</span>
|
||||
<span class="legend-item"><span class="dot b" />B = 加数</span>
|
||||
<span class="legend-item"><span class="dot s" />S = 和（Sum，本位结果）</span>
|
||||
<span class="legend-item"><span class="dot c" />C = 进位（Carry，传给下一位）</span>
|
||||
</div>
|
||||
|
||||
<!-- 输入控制 -->
|
||||
<div class="control-panel">
|
||||
<div class="input-group">
|
||||
<span class="group-label">A（被加数）</span>
|
||||
<div class="bits">
|
||||
<button
|
||||
v-for="(bit, i) in bitsA"
|
||||
:key="'a' + i"
|
||||
class="bit-btn"
|
||||
:class="{ on: bit }"
|
||||
@click="toggleBit('A', i)"
|
||||
>
|
||||
{{ bit }}
|
||||
</button>
|
||||
</div>
|
||||
<span class="decimal">= {{ decimalA }}</span>
|
||||
<label>
|
||||
<span class="control-label">A（被加数）</span>
|
||||
<input v-model.number="inputA" type="number" min="0" max="15" class="num-input" />
|
||||
</label>
|
||||
<span class="op">+</span>
|
||||
<label>
|
||||
<span class="control-label">B（加数）</span>
|
||||
<input v-model.number="inputB" type="number" min="0" max="15" class="num-input" />
|
||||
</label>
|
||||
<span class="eq">=</span>
|
||||
<span class="result-dec">{{ resultDec }}</span>
|
||||
</div>
|
||||
|
||||
<div class="why-what-box">
|
||||
<p class="why-p">
|
||||
<strong>为啥要看这些？</strong>CPU 只会处理 0 和 1，所以加法要「一位一位」算；每一列（第 0 位、第 1 位…）都需要一个小电路来算「这一位写几、要不要往左进位」。
|
||||
</p>
|
||||
<p class="what-p">
|
||||
<strong>这些词是啥？</strong>
|
||||
<span class="term">半加器</span>：只算这一位的 A+B（最右边没有进位进来）。
|
||||
<span class="term">全加器</span>：算 A+B+上一位的进位。
|
||||
<span class="term">S</span>：这一位写下的数字（0 或 1）。
|
||||
<span class="term">Cout</span>：要不要往左边一位进 1（进就是 1，不进就是 0）。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example-block">
|
||||
<div class="example-row">
|
||||
<span class="example-label">A（被加数）</span>
|
||||
<span class="example-bits">
|
||||
<span v-for="(b, i) in bitsA" :key="'a'+i" class="bit" :class="{ active: highlightedBit === (3 - i) }">{{ b }}</span>
|
||||
</span>
|
||||
<span class="example-dec">= {{ inputA }}</span>
|
||||
</div>
|
||||
<div class="op-sign">+</div>
|
||||
<div class="input-group">
|
||||
<span class="group-label">B（加数）</span>
|
||||
<div class="bits">
|
||||
<button
|
||||
v-for="(bit, i) in bitsB"
|
||||
:key="'b' + i"
|
||||
class="bit-btn"
|
||||
:class="{ on: bit }"
|
||||
@click="toggleBit('B', i)"
|
||||
>
|
||||
{{ bit }}
|
||||
</button>
|
||||
</div>
|
||||
<span class="decimal">= {{ decimalB }}</span>
|
||||
<div class="example-row">
|
||||
<span class="example-label">B（加数）</span>
|
||||
<span class="example-bits">
|
||||
<span v-for="(b, i) in bitsB" :key="'b'+i" class="bit" :class="{ active: highlightedBit === (3 - i) }">{{ b }}</span>
|
||||
</span>
|
||||
<span class="example-dec">= {{ inputB }}</span>
|
||||
</div>
|
||||
<div class="op-sign">=</div>
|
||||
<div class="result-inline">
|
||||
<span class="result-bin">{{ resultBinary }}</span>
|
||||
<span class="result-dec">（十进制 {{ resultDecimal }}）</span>
|
||||
<div class="example-row result-row">
|
||||
<span class="example-label">结果</span>
|
||||
<span class="example-bits">
|
||||
<span v-for="(b, i) in bitsSum" :key="'s'+i" class="bit" :class="{ active: highlightedBit === (3 - i) }">{{ b }}</span>
|
||||
</span>
|
||||
<span class="example-dec">= {{ resultDec }}</span>
|
||||
</div>
|
||||
<div class="bit-legend">
|
||||
<span v-for="i in 4" :key="i" class="bit-legend-item">第{{ 4 - i }}位</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 每位加法器展示 -->
|
||||
<div class="stages-label">逐位计算过程（从最低位开始）</div>
|
||||
<div class="stages-label">逐位计算（从右往左：第 0 位 → 第 3 位，对应上面每一列）</div>
|
||||
<div class="adder-stages">
|
||||
<div
|
||||
v-for="(stage, idx) in stageData"
|
||||
v-for="(stage, idx) in stages"
|
||||
:key="idx"
|
||||
class="stage"
|
||||
:class="{ 'stage-highlight': highlightedBit === stage.bitPos }"
|
||||
@mouseenter="highlightedBit = stage.bitPos"
|
||||
@mouseleave="highlightedBit = null"
|
||||
>
|
||||
<div class="stage-title">第 {{ stage.bitPos }} 位（{{ stage.posName }}）</div>
|
||||
|
||||
<div class="stage-content">
|
||||
<!-- 输入列 -->
|
||||
<div class="io-col inputs-col">
|
||||
<div class="io-row">
|
||||
<span class="io-badge a-badge">A</span>
|
||||
@@ -74,55 +80,34 @@
|
||||
<span class="io-badge b-badge">B</span>
|
||||
<span class="io-val">{{ stage.b }}</span>
|
||||
</div>
|
||||
<div v-if="stage.carryIn !== null" class="io-row carry-in-row">
|
||||
<div v-if="stage.carryIn !== null" class="io-row">
|
||||
<span class="io-badge cin-badge">Cin</span>
|
||||
<span class="io-val">{{ stage.carryIn }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全加器框 -->
|
||||
<div class="fa-box">
|
||||
<div class="fa-label">{{ stage.carryIn !== null ? '全加器' : '半加器' }}</div>
|
||||
<div class="fa-hint">{{ stage.carryIn !== null ? 'Full Adder' : 'Half Adder' }}</div>
|
||||
<div class="fa-hint">{{ stage.carryIn !== null ? 'A+B+进位' : '只算 A+B' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 输出列 -->
|
||||
<div class="io-col outputs-col">
|
||||
<div class="io-row">
|
||||
<span class="io-badge s-badge">S</span>
|
||||
<span class="io-badge s-badge" :title="'S = 这一位写下的数'">S</span>
|
||||
<span class="io-val sum-val">{{ stage.sum }}</span>
|
||||
</div>
|
||||
<div class="io-row">
|
||||
<span class="io-badge cout-badge">Cout</span>
|
||||
<span class="io-badge cout-badge" :title="'Cout = 往左进 0 还是 1'">Cout</span>
|
||||
<span class="io-val carry-val">{{ stage.carryOut }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进位传递提示 -->
|
||||
<div v-if="idx < stageData.length - 1 && stage.carryOut" class="carry-hint">
|
||||
进位 {{ stage.carryOut }} 传给第 {{ stage.bitPos + 1 }} 位 →
|
||||
<div v-if="idx < stages.length - 1" class="carry-hint" :class="{ 'no-carry': !stage.carryOut }">
|
||||
{{ stage.carryOut ? `进位 ${stage.carryOut} 传给第 ${stage.bitPos + 1} 位 →` : '无进位' }}
|
||||
</div>
|
||||
<div v-else-if="idx < stageData.length - 1" class="carry-hint no-carry">
|
||||
无进位
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结果 -->
|
||||
<div class="result-bar">
|
||||
<div class="result-row">
|
||||
<span class="result-label">二进制结果</span>
|
||||
<span class="result-bits">{{ resultBinary }}</span>
|
||||
</div>
|
||||
<div class="result-row">
|
||||
<span class="result-label">十进制验证</span>
|
||||
<span class="result-eq">{{ decimalA }} + {{ decimalB }} = {{ resultDecimal }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>每位全加器接收 A、B 和上一位的进位（Cin），输出本位的和（S）与向上传递的进位（Cout）——和我们手算竖式加法"逢二进一"完全一致。
|
||||
<strong>核心思想：</strong>每位全加器接收 A、B 和上一位的进位（Cin），输出本位的和（S）与传给下一位的进位（Cout），和手算竖式「逢二进一」一致。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -130,57 +115,66 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const bitsA = ref([0, 0, 1, 1])
|
||||
const bitsB = ref([0, 0, 1, 0])
|
||||
const POS_NAMES = ['最低位', '次低位', '次高位', '最高位']
|
||||
|
||||
const toggleBit = (arr, i) => {
|
||||
if (arr === 'A') {
|
||||
bitsA.value[i] = bitsA.value[i] ? 0 : 1
|
||||
} else {
|
||||
bitsB.value[i] = bitsB.value[i] ? 0 : 1
|
||||
}
|
||||
function clamp(n) {
|
||||
const v = Number(n)
|
||||
if (Number.isNaN(v)) return 0
|
||||
return Math.max(0, Math.min(15, Math.floor(v)))
|
||||
}
|
||||
|
||||
const decimalA = computed(() =>
|
||||
bitsA.value.reduce((acc, bit, i) => acc + bit * Math.pow(2, 3 - i), 0)
|
||||
)
|
||||
const inputA = ref(3)
|
||||
const inputB = ref(2)
|
||||
const highlightedBit = ref(null)
|
||||
|
||||
const decimalB = computed(() =>
|
||||
bitsB.value.reduce((acc, bit, i) => acc + bit * Math.pow(2, 3 - i), 0)
|
||||
)
|
||||
const clampedA = computed(() => clamp(inputA.value))
|
||||
const clampedB = computed(() => clamp(inputB.value))
|
||||
|
||||
const stageData = computed(() => {
|
||||
const stages = []
|
||||
let carry = 0
|
||||
const posNames = ['最低位', '次低位', '次高位', '最高位']
|
||||
for (let i = 3; i >= 0; i--) {
|
||||
const a = bitsA.value[i]
|
||||
const b = bitsB.value[i]
|
||||
const total = a + b + carry
|
||||
const sum = total % 2
|
||||
const carryOut = total >= 2 ? 1 : 0
|
||||
stages.push({
|
||||
bitPos: 3 - i,
|
||||
posName: posNames[3 - i],
|
||||
const bitsA = computed(() => (clampedA.value >>> 0).toString(2).padStart(4, '0').split(''))
|
||||
const bitsB = computed(() => (clampedB.value >>> 0).toString(2).padStart(4, '0').split(''))
|
||||
|
||||
const stages = computed(() => {
|
||||
const A = clampedA.value
|
||||
const B = clampedB.value
|
||||
const result = []
|
||||
let carryIn = null
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const a = (A >> i) & 1
|
||||
const b = (B >> i) & 1
|
||||
let sum, carryOut
|
||||
if (carryIn === null) {
|
||||
sum = a ^ b
|
||||
carryOut = a & b
|
||||
} else {
|
||||
sum = (a ^ b) ^ carryIn
|
||||
carryOut = (a & b) | (carryIn & (a ^ b))
|
||||
}
|
||||
result.push({
|
||||
bitPos: i,
|
||||
posName: POS_NAMES[i],
|
||||
a,
|
||||
b,
|
||||
carryIn: stages.length > 0 ? carry : null,
|
||||
carryIn: carryIn === null ? null : carryIn,
|
||||
sum,
|
||||
carryOut
|
||||
})
|
||||
carry = carryOut
|
||||
carryIn = carryOut
|
||||
}
|
||||
return stages
|
||||
return result
|
||||
})
|
||||
|
||||
const sumBits = computed(() => stageData.value.map((s) => s.sum).reverse())
|
||||
|
||||
const resultBinary = computed(() => {
|
||||
const lastCarry = stageData.value[stageData.value.length - 1]?.carryOut || 0
|
||||
return (lastCarry ? lastCarry.toString() : '') + sumBits.value.join('')
|
||||
const bitsSum = computed(() => {
|
||||
const S = stages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
|
||||
return (S >>> 0).toString(2).padStart(4, '0').split('')
|
||||
})
|
||||
|
||||
const resultDecimal = computed(() => decimalA.value + decimalB.value)
|
||||
const fourBitResult = computed(() =>
|
||||
stages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
|
||||
)
|
||||
const overflow = computed(() => clampedA.value + clampedB.value > 15)
|
||||
const resultDec = computed(() =>
|
||||
overflow.value ? `${fourBitResult.value}（4 位溢出）` : String(fourBitResult.value)
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -193,147 +187,167 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.65rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
display: block;
|
||||
font-size: 0.82rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* 名词解释 */
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.7rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-2);
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.7rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dot.a { background: var(--vp-c-brand); }
|
||||
.dot.b { background: #8b5cf6; }
|
||||
.dot.s { background: var(--vp-c-success, #16a34a); }
|
||||
.dot.c { background: #d97706; }
|
||||
|
||||
/* 控制面板 */
|
||||
.control-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.55rem 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.group-label {
|
||||
font-size: 0.8rem;
|
||||
.control-panel label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.num-input {
|
||||
width: 3rem;
|
||||
padding: 0.25rem 0.35rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.control-panel .op,
|
||||
.control-panel .eq {
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bits {
|
||||
display: flex;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.bit-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
.control-panel .result-dec {
|
||||
font-weight: bold;
|
||||
transition: all 0.2s;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.bit-btn.on {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
.why-what-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.decimal {
|
||||
font-size: 0.82rem;
|
||||
.why-what-box .why-p {
|
||||
margin: 0 0 0.4rem;
|
||||
}
|
||||
|
||||
.why-what-box .what-p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.why-what-box .term {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.example-block {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.bit-legend {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-left: 6rem;
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.bit-legend-item {
|
||||
min-width: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.example-row .example-bits {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.bit {
|
||||
display: inline-block;
|
||||
min-width: 1.2em;
|
||||
text-align: center;
|
||||
padding: 0.1rem 0;
|
||||
border-radius: 3px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.bit.active {
|
||||
background: var(--vp-c-brand-2);
|
||||
color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.stage.stage-highlight {
|
||||
outline: 2px solid var(--vp-c-brand-1);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.example-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.example-label {
|
||||
color: var(--vp-c-text-2);
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.example-bits {
|
||||
font-family: monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.example-dec {
|
||||
color: var(--vp-c-text-2);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.op-sign {
|
||||
font-size: 1.1rem;
|
||||
.result-row .example-bits {
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-brand);
|
||||
flex-shrink: 0;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.result-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.result-bin {
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.result-dec {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
/* 阶段 */
|
||||
.stages-label {
|
||||
font-size: 0.82rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.4rem;
|
||||
margin: 0.75rem 0 0.4rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.adder-stages {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -344,7 +358,7 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
|
||||
padding: 0.55rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.stage-title {
|
||||
@@ -401,16 +415,11 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
|
||||
.sum-val { color: var(--vp-c-success, #16a34a); }
|
||||
.carry-val { color: #d97706; }
|
||||
|
||||
/* 全加器盒子 */
|
||||
.fa-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.3rem 0.35rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -422,9 +431,9 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
|
||||
.fa-hint {
|
||||
font-size: 0.6rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
/* 进位提示 */
|
||||
.carry-hint {
|
||||
font-size: 0.65rem;
|
||||
color: #d97706;
|
||||
@@ -436,48 +445,14 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
/* 结果栏 */
|
||||
.result-bar {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
padding: 0.55rem 0.75rem;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.result-row {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 0.82rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.result-bits {
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.result-eq {
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-success, #16a34a);
|
||||
}
|
||||
|
||||
/* info box */
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
|
||||
+44
-244
@@ -2,48 +2,13 @@
|
||||
<div class="logic-gate-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">逻辑门：用开关做运算</span>
|
||||
<span class="subtitle">切换输入 A / B，同屏观察四种门的输出</span>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<span class="panel-hint">点按钮切换 0 / 1，右侧四个门同步更新：</span>
|
||||
<div class="input-item">
|
||||
<span class="input-label">输入 A</span>
|
||||
<button class="input-btn" :class="{ on: inputA }" @click="inputA = !inputA">
|
||||
{{ inputA ? '1' : '0' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-item">
|
||||
<span class="input-label">输入 B</span>
|
||||
<button class="input-btn" :class="{ on: inputB }" @click="inputB = !inputB">
|
||||
{{ inputB ? '1' : '0' }}
|
||||
</button>
|
||||
</div>
|
||||
<span class="current-state">当前：A={{ inputA ? 1 : 0 }}，B={{ inputB ? 1 : 0 }}</span>
|
||||
</div>
|
||||
|
||||
<div class="gate-grid">
|
||||
<div v-for="gate in gates" :key="gate.name" class="gate-card">
|
||||
<div class="gate-top">
|
||||
<span class="gate-name">{{ gate.name }}</span>
|
||||
<span class="gate-formula">{{ gate.formula }}</span>
|
||||
</div>
|
||||
<div class="gate-analogy">{{ gate.analogy }}</div>
|
||||
<div class="gate-output-row">
|
||||
<span class="output-label">输出</span>
|
||||
<span
|
||||
class="output-value"
|
||||
:class="{ on: gateOutput(gate.name, inputA, inputB) }"
|
||||
>
|
||||
{{ gateOutput(gate.name, inputA, inputB) }}
|
||||
</span>
|
||||
<span class="output-hint">{{ gateOutput(gate.name, inputA, inputB) ? '（真 / 导通）' : '（假 / 断开）' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="intro">
|
||||
输入 A、B 只能是 0 或 1；四种门按不同规则输出一个 0 或 1。下面表格列出所有 4 种输入组合的结果。
|
||||
</p>
|
||||
|
||||
<div class="truth-section">
|
||||
<div class="table-title">四种门真值表对照（高亮行 = 当前输入）</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -56,65 +21,37 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="row in truthRows"
|
||||
:key="`${row.a}-${row.b}`"
|
||||
:class="{
|
||||
highlight:
|
||||
row.a === (inputA ? 1 : 0) && row.b === (inputB ? 1 : 0)
|
||||
}"
|
||||
>
|
||||
<tr v-for="row in truthRows" :key="`${row.a}-${row.b}`">
|
||||
<td>{{ row.a }}</td>
|
||||
<td>{{ row.b }}</td>
|
||||
<td>{{ gateOutput('AND', !!row.a, !!row.b) }}</td>
|
||||
<td>{{ gateOutput('OR', !!row.a, !!row.b) }}</td>
|
||||
<td>{{ gateOutput('NOT', !!row.a, !!row.b) }}</td>
|
||||
<td>{{ gateOutput('XOR', !!row.a, !!row.b) }}</td>
|
||||
<td>{{ row.and }}</td>
|
||||
<td>{{ row.or }}</td>
|
||||
<td>{{ row.not }}</td>
|
||||
<td>{{ row.xor }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="col-meaning">
|
||||
<li><strong>AND</strong>：两个都是 1 才输出 1（像串联：都通才通）</li>
|
||||
<li><strong>OR</strong>：有一个 1 就输出 1（像并联：一通就通）</li>
|
||||
<li><strong>NOT(A)</strong>：对 A 取反，0→1、1→0</li>
|
||||
<li><strong>XOR</strong>：两个不同输出 1，相同输出 0</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>逻辑门用晶体管的"开关"组合实现基本运算——AND 像串联、OR 像并联、NOT 取反、XOR 判异。所有复杂计算都由这四种基础操作构建而来。
|
||||
<strong>核心思想：</strong>逻辑门用晶体管的“开关”组合实现这四种运算，复杂计算都由它们组合而成。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const inputA = ref(false)
|
||||
const inputB = ref(false)
|
||||
|
||||
const gates = [
|
||||
{ name: 'AND', formula: 'A && B', analogy: '串联：都为 1 才输出 1' },
|
||||
{ name: 'OR', formula: 'A || B', analogy: '并联：任一为 1 就输出 1' },
|
||||
{ name: 'NOT', formula: '!A', analogy: '取反：0→1，1→0' },
|
||||
{ name: 'XOR', formula: 'A ⊕ B', analogy: '判异：不同为 1，相同为 0' }
|
||||
]
|
||||
|
||||
const truthRows = [
|
||||
{ a: 0, b: 0 },
|
||||
{ a: 0, b: 1 },
|
||||
{ a: 1, b: 0 },
|
||||
{ a: 1, b: 1 }
|
||||
{ a: 0, b: 0, and: 0, or: 0, not: 1, xor: 0 },
|
||||
{ a: 0, b: 1, and: 0, or: 1, not: 1, xor: 1 },
|
||||
{ a: 1, b: 0, and: 0, or: 1, not: 0, xor: 1 },
|
||||
{ a: 1, b: 1, and: 1, or: 1, not: 0, xor: 0 }
|
||||
]
|
||||
|
||||
const gateOutput = (name, a, b) => {
|
||||
switch (name) {
|
||||
case 'AND':
|
||||
return a && b ? 1 : 0
|
||||
case 'OR':
|
||||
return a || b ? 1 : 0
|
||||
case 'NOT':
|
||||
return a ? 0 : 1
|
||||
case 'XOR':
|
||||
return a !== b ? 1 : 0
|
||||
default:
|
||||
return 0
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -127,11 +64,7 @@ const gateOutput = (name, a, b) => {
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
@@ -139,169 +72,29 @@ const gateOutput = (name, a, b) => {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
.intro {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.82rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem 0.65rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.panel-hint {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.current-state {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-left: auto;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.input-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 999px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-size: 0.82rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.input-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.input-btn.on {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.gate-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.gate-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 0.55rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.gate-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gate-name {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.gate-formula {
|
||||
font-family: monospace;
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.gate-analogy {
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.gate-output-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.output-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.output-hint {
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.output-value {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.output-value.on {
|
||||
background: var(--vp-c-success);
|
||||
color: white;
|
||||
border-color: var(--vp-c-success);
|
||||
margin: 0 0 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.truth-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.82rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.88rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 0;
|
||||
height: 2rem;
|
||||
padding: 0.4rem 0.5rem;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
@@ -312,29 +105,36 @@ th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tr.highlight {
|
||||
background: var(--vp-c-brand-soft);
|
||||
.col-meaning {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.col-meaning li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.col-meaning strong {
|
||||
color: var(--vp-c-text-1);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.gate-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+119
-296
@@ -1,13 +1,26 @@
|
||||
<template>
|
||||
<div class="register-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">寄存器：存储状态的功能单元</span>
|
||||
<span class="subtitle">改变输入不会改变存储值——必须主动"写入"</span>
|
||||
<span class="title">寄存器：能「记住」一个 0 或 1 的小单元</span>
|
||||
<span class="subtitle">只有点「写入」时才会把当前输入记下来，平时改输入不会影响已存的值</span>
|
||||
</div>
|
||||
|
||||
<div class="why-what-box">
|
||||
<p class="why-p">
|
||||
<strong>为啥要看这个？</strong>CPU 算到一半要暂时「记住」中间结果，寄存器就是干这个的。它和「直接连线」不同：改输入不会立刻改变里面存的东西，必须主动点一次「写入」才会更新。
|
||||
</p>
|
||||
<p class="what-p">
|
||||
<strong>这些词是啥？</strong>
|
||||
<span class="term">输入</span>：你想写进去的 0 或 1。
|
||||
<span class="term">写入</span>：点一下，把当前输入「锁进」寄存器。
|
||||
<span class="term">存储值</span>：寄存器里现在记着的数（只有写入时才会变）。
|
||||
<span class="term">输出</span>：从寄存器读出来的数，和存储值一样。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="control-left">
|
||||
<span class="ctrl-label">输入值</span>
|
||||
<label class="ctrl-group">
|
||||
<span class="ctrl-label">输入</span>
|
||||
<button
|
||||
class="input-toggle"
|
||||
:class="{ on: inputData === 1 }"
|
||||
@@ -15,87 +28,33 @@
|
||||
>
|
||||
{{ inputData }}
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
<button class="write-btn" :class="{ flash: isWriting }" @click="writeOnce">
|
||||
写入寄存器 →
|
||||
写入
|
||||
</button>
|
||||
<div class="control-right">
|
||||
<span class="chip">存储值：{{ storedData }}</span>
|
||||
<span class="chip" :class="{ chip_on: storedData === 1 }">输出：{{ storedData === 1 ? '1 ✓' : '0' }}</span>
|
||||
</div>
|
||||
<label class="ctrl-group">
|
||||
<span class="ctrl-label">存储</span>
|
||||
<span class="stored-val" :class="{ on: storedData === 1 }">{{ storedData }}</span>
|
||||
</label>
|
||||
<span class="ctrl-group">
|
||||
<span class="ctrl-label">输出</span>
|
||||
<span class="output-val" :class="{ on: storedData === 1 }">{{ storedData }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="flow-diagram">
|
||||
<div class="flow-node input-node">
|
||||
<div class="node-label">输入（Data）</div>
|
||||
<div class="node-value" :class="{ on: inputData === 1 }">{{ inputData }}</div>
|
||||
<div class="node-hint">点左侧按钮切换</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" :class="{ active: isWriting }">
|
||||
<div class="arrow-line" />
|
||||
<div class="arrow-tag">{{ isWriting ? '写入中...' : '写入触发' }}</div>
|
||||
<div class="arrow-head">→</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-node register-node" :class="{ flashing: isWriting }">
|
||||
<div class="node-label">D 触发器（寄存器核心）</div>
|
||||
<div class="node-value" :class="{ on: storedData === 1 }">{{ storedData }}</div>
|
||||
<div class="node-hint">{{ isWriting ? '正在锁存...' : '保持 (Hold)' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow" :class="{ active: storedData === 1 }">
|
||||
<div class="arrow-line" />
|
||||
<div class="arrow-tag">输出</div>
|
||||
<div class="arrow-head">→</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-node output-node" :class="{ on: storedData === 1 }">
|
||||
<div class="node-label">输出（Output）</div>
|
||||
<div class="bulb">{{ storedData === 1 ? '💡' : '🌑' }}</div>
|
||||
<div class="node-hint">{{ storedData === 1 ? '亮（1）' : '灭（0）' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="state-table">
|
||||
<div class="table-title">操作步骤说明</div>
|
||||
<div class="state-rows">
|
||||
<div class="state-row">
|
||||
<span class="step-num">①</span>
|
||||
<span>点"输入值"按钮切换输入（0/1）</span>
|
||||
</div>
|
||||
<div class="state-row">
|
||||
<span class="step-num">②</span>
|
||||
<span>此时存储值<strong>不变</strong>——这就是寄存器的意义</span>
|
||||
</div>
|
||||
<div class="state-row">
|
||||
<span class="step-num">③</span>
|
||||
<span>点"写入寄存器"，输入值才被锁入</span>
|
||||
</div>
|
||||
<div class="state-row">
|
||||
<span class="step-num">④</span>
|
||||
<span>写入后再改输入，存储值依然<strong>保持</strong>不变</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="diff-display">
|
||||
<div class="diff-item">
|
||||
<div class="diff-label">当前输入</div>
|
||||
<div class="diff-value" :class="{ on: inputData === 1 }">{{ inputData }}</div>
|
||||
</div>
|
||||
<div class="diff-sep">≠</div>
|
||||
<div class="diff-item">
|
||||
<div class="diff-label">存储值</div>
|
||||
<div class="diff-value" :class="{ on: storedData === 1 }">{{ storedData }}</div>
|
||||
</div>
|
||||
<div v-if="inputData === storedData" class="diff-same">（当前相同）</div>
|
||||
</div>
|
||||
<div class="visualization-area">
|
||||
<div class="flow-strip">
|
||||
<span class="flow-item">输入 {{ inputData }}</span>
|
||||
<span class="flow-arrow" :class="{ active: isWriting }">{{ isWriting ? '写入中 →' : '— 点「写入」才更新 →' }}</span>
|
||||
<span class="flow-item flow-store" :class="{ flash: isWriting }">存 {{ storedData }}</span>
|
||||
</div>
|
||||
<p class="flow-hint">
|
||||
{{ inputData !== storedData ? '输入和存储不一样：点「写入」会把当前输入记进去。' : '输入和存储已一致。' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>寄存器只在"写入"信号触发时更新，其余时刻持续锁定当前值。这就是 CPU 能在计算过程中稳定保存中间结果的原因。
|
||||
<strong>核心思想：</strong>寄存器只在「写入」那一刻更新，其余时间一直保持原来的值，所以 CPU 能稳定保存中间结果。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -126,41 +85,62 @@ const writeOnce = () => {
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
display: block;
|
||||
font-size: 0.82rem;
|
||||
margin-left: 0.5rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.why-what-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.why-what-box .why-p {
|
||||
margin: 0 0 0.4rem;
|
||||
}
|
||||
|
||||
.why-what-box .what-p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.why-what-box .term {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
/* ---- control panel ---- */
|
||||
.control-panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
gap: 0.6rem;
|
||||
padding: 0.5rem 0.7rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
margin-bottom: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.control-left {
|
||||
display: flex;
|
||||
.ctrl-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.ctrl-label {
|
||||
@@ -169,9 +149,9 @@ const writeOnce = () => {
|
||||
}
|
||||
|
||||
.input-toggle {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
font-weight: bold;
|
||||
@@ -187,260 +167,102 @@ const writeOnce = () => {
|
||||
}
|
||||
|
||||
.write-btn {
|
||||
padding: 0.3rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
border: 2px solid var(--vp-c-warning);
|
||||
padding: 0.35rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--vp-c-warning-1, #d97706);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-warning-1, #d97706);
|
||||
font-size: 0.82rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.write-btn:hover {
|
||||
background: var(--vp-c-warning-soft);
|
||||
background: var(--vp-c-warning-soft, rgba(217, 119, 6, 0.1));
|
||||
}
|
||||
|
||||
.write-btn.flash {
|
||||
background: var(--vp-c-warning);
|
||||
background: var(--vp-c-warning-1, #d97706);
|
||||
color: white;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.control-right {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.chip {
|
||||
font-size: 0.78rem;
|
||||
padding: 0.2rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.chip_on {
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
/* ---- main content ---- */
|
||||
.demo-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5fr 1fr;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
/* ---- flow diagram ---- */
|
||||
.flow-diagram {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
.stored-val,
|
||||
.output-val {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.flow-node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.node-value {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 8px;
|
||||
justify-content: center;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0 0.4rem;
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
transition: all 0.3s;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.node-value.on {
|
||||
.stored-val.on,
|
||||
.output-val.on {
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.node-hint {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
.visualization-area {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.register-node .node-value {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
font-size: 1.5rem;
|
||||
border: 3px solid var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.register-node.flashing .node-value {
|
||||
border-color: var(--vp-c-warning);
|
||||
box-shadow: 0 0 10px var(--vp-c-warning-soft);
|
||||
}
|
||||
|
||||
.bulb {
|
||||
font-size: 1.8rem;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.4;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.output-node.on .bulb {
|
||||
filter: grayscale(0%);
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 12px #facc15;
|
||||
}
|
||||
|
||||
/* ---- arrows ---- */
|
||||
.flow-arrow {
|
||||
.flow-strip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.arrow-line {
|
||||
width: 28px;
|
||||
height: 2px;
|
||||
background: var(--vp-c-divider);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.flow-arrow.active .arrow-line {
|
||||
background: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.arrow-tag {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.arrow-head {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
/* ---- state table ---- */
|
||||
.state-table {
|
||||
gap: 0.4rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
.flow-item {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.state-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.state-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.step-num {
|
||||
flex-shrink: 0;
|
||||
font-weight: bold;
|
||||
.flow-store {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.diff-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.diff-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.diff-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.diff-value {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
.flow-store.flash {
|
||||
box-shadow: 0 0 0 2px var(--vp-c-warning-1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.diff-value.on {
|
||||
border-color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.diff-sep {
|
||||
font-size: 1.1rem;
|
||||
.flow-arrow {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.flow-arrow.active {
|
||||
color: var(--vp-c-warning-1);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.diff-same {
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
.flow-hint {
|
||||
margin: 0.4rem 0 0;
|
||||
font-size: 0.82rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
/* ---- info box ---- */
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.8rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
@@ -448,9 +270,10 @@ const writeOnce = () => {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.demo-content {
|
||||
grid-template-columns: 1fr;
|
||||
@media (max-width: 520px) {
|
||||
.control-panel {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+72
-276
@@ -5,97 +5,43 @@
|
||||
<span class="subtitle">Gate 电压决定电流能否通过</span>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="control-left">
|
||||
<span class="control-label">栅极输入（Gate）</span>
|
||||
<button class="gate-toggle" :class="{ on: isOn }" @click="toggleSwitch">
|
||||
{{ isOn ? '1（高电压）' : '0（低电压）' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control-right">
|
||||
<span class="chip">通道：{{ isOn ? '导通' : '断开' }}</span>
|
||||
<span class="chip">输出：{{ isOn ? '1' : '0' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="transistor-diagram">
|
||||
<div class="gate-column">
|
||||
<div class="gate-title">控制端 Gate</div>
|
||||
<div class="gate-value" :class="{ on: isOn }">
|
||||
{{ isOn ? '1' : '0' }}
|
||||
<div class="states">
|
||||
<div class="state-card">
|
||||
<div class="state-label">Gate = 0（低电压）</div>
|
||||
<div class="channel-row">
|
||||
<span class="terminal">源极</span>
|
||||
<div class="channel-track off">
|
||||
<span class="block-icon">✕ 断开</span>
|
||||
</div>
|
||||
<div class="gate-arrow">↓ 控制</div>
|
||||
<span class="terminal">漏极</span>
|
||||
</div>
|
||||
<div class="output-line">输出：<strong>0</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="main-channel">
|
||||
<div class="terminal-box">源极 Source</div>
|
||||
<div class="channel-track" :class="{ on: isOn }">
|
||||
<span v-if="!isOn" class="block-icon">✕</span>
|
||||
<template v-else>
|
||||
<span class="flow-dot d1" />
|
||||
<span class="flow-dot d2" />
|
||||
<span class="flow-dot d3" />
|
||||
</template>
|
||||
<div class="state-card">
|
||||
<div class="state-label">Gate = 1（高电压）</div>
|
||||
<div class="channel-row">
|
||||
<span class="terminal">源极</span>
|
||||
<div class="channel-track on">
|
||||
<span class="flow-dot d1" />
|
||||
<span class="flow-dot d2" />
|
||||
<span class="flow-dot d3" />
|
||||
<span class="flow-label">导通</span>
|
||||
</div>
|
||||
<div class="terminal-box">漏极 Drain</div>
|
||||
</div>
|
||||
|
||||
<div class="result-line" :class="{ on: isOn }">
|
||||
{{ isOn ? '电流通过：Source → Drain' : '电流被阻断：无法通过通道' }}
|
||||
<span class="terminal">漏极</span>
|
||||
</div>
|
||||
<div class="output-line">输出：<strong>1</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="truth-table">
|
||||
<div class="table-title">晶体管状态表</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Gate 输入</th>
|
||||
<th>通道状态</th>
|
||||
<th>输出</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr :class="{ highlight: !isOn }">
|
||||
<td>0（低电压）</td>
|
||||
<td>断开</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr :class="{ highlight: isOn }">
|
||||
<td>1（高电压）</td>
|
||||
<td>导通</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="table-hint">
|
||||
点上方按钮切换 Gate，观察“通道状态”和“电流流动”如何同步变化。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-guide">
|
||||
<div class="step-item">① 改变 Gate 电压（0/1）</div>
|
||||
<div class="step-item">② 通道变为断开/导通</div>
|
||||
<div class="step-item">③ 输出随之变成 0/1</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>晶体管本质是“电控开关”：Gate=1 时导通，Gate=0
|
||||
时断开。所有数字计算都建立在这种 0/1 开关之上。
|
||||
<strong>核心思想：</strong>晶体管是“电控开关”：Gate=1 导通、Gate=0 断开，所有数字计算都建立在这种 0/1 开关之上。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const isOn = ref(false)
|
||||
|
||||
const toggleSwitch = () => {
|
||||
isOn.value = !isOn.value
|
||||
}
|
||||
// 纯静态展示，无需交互
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -111,7 +57,7 @@ const toggleSwitch = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
@@ -125,166 +71,72 @@ const toggleSwitch = () => {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.65rem 0.75rem;
|
||||
.states {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.state-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
margin-bottom: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.control-left {
|
||||
.state-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.channel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
.terminal {
|
||||
font-size: 0.82rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.gate-toggle {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 999px;
|
||||
padding: 0.3rem 0.65rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.gate-toggle.on {
|
||||
background: var(--vp-c-success-soft);
|
||||
color: var(--vp-c-success-1);
|
||||
border-color: var(--vp-c-success);
|
||||
color: var(--vp-c-success-1);
|
||||
background: var(--vp-c-success-soft);
|
||||
}
|
||||
|
||||
.control-right {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.chip {
|
||||
font-size: 0.78rem;
|
||||
padding: 0.2rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
.chip.active {
|
||||
border-color: var(--vp-c-success);
|
||||
}
|
||||
|
||||
.legend-chip {
|
||||
font-size: 0.72rem;
|
||||
padding: 0.16rem 0.42rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.transistor-diagram {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.gate-column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.gate-title {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.gate-value {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gate-value.on {
|
||||
border-color: var(--vp-c-success);
|
||||
color: var(--vp-c-success-1);
|
||||
background: var(--vp-c-success-soft);
|
||||
}
|
||||
|
||||
.gate-arrow {
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.main-channel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.6fr 1fr;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.terminal-box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.45rem;
|
||||
text-align: center;
|
||||
font-size: 0.78rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.channel-track {
|
||||
height: 2.4rem;
|
||||
flex: 1;
|
||||
min-height: 2.5rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 999px;
|
||||
background: #e5e7eb;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.channel-track.off {
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.channel-track.on {
|
||||
background: var(--vp-c-success-soft);
|
||||
border-color: var(--vp-c-success);
|
||||
}
|
||||
|
||||
.block-icon {
|
||||
font-size: 1.1rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.flow-dot {
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-success);
|
||||
position: absolute;
|
||||
left: -8%;
|
||||
left: -10%;
|
||||
animation: flow 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@@ -296,92 +148,40 @@ const toggleSwitch = () => {
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
|
||||
.flow-label {
|
||||
margin-left: 0.4rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-success-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@keyframes flow {
|
||||
from {
|
||||
left: -8%;
|
||||
left: -10%;
|
||||
}
|
||||
to {
|
||||
left: 105%;
|
||||
}
|
||||
}
|
||||
|
||||
.result-line {
|
||||
margin-top: 0.7rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--vp-c-text-2);
|
||||
padding: 0.45rem 0.55rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.result-line.on {
|
||||
color: var(--vp-c-success-1);
|
||||
}
|
||||
|
||||
.truth-table {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.55rem;
|
||||
.output-line {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 0.45rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
tr.highlight {
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.table-hint {
|
||||
margin-top: 0.55rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.step-guide {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.45rem;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 0.45rem 0.5rem;
|
||||
font-size: 0.78rem;
|
||||
.output-line strong {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
@@ -389,12 +189,8 @@ tr.highlight {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.demo-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.step-guide {
|
||||
@media (max-width: 640px) {
|
||||
.states {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -382,29 +382,32 @@ function reset() {
|
||||
/* Graph */
|
||||
.gb-graph-wrap {
|
||||
background: var(--vp-c-bg); border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 10px 12px;
|
||||
padding: 14px 16px;
|
||||
min-height: 200px;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.gb-legend {
|
||||
display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px;
|
||||
font-size: 0.74rem; color: var(--vp-c-text-2);
|
||||
display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px;
|
||||
font-size: 0.8rem; color: var(--vp-c-text-2);
|
||||
}
|
||||
.leg-item { display: flex; align-items: center; gap: 5px; }
|
||||
.leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.leg-item { display: flex; align-items: center; gap: 6px; }
|
||||
.leg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
|
||||
.main-c { background: #5b9cf6; }
|
||||
.feat-c { background: #f9e2af; }
|
||||
.merge-c { background: #a6e3a1; }
|
||||
.leg-head {
|
||||
font-family: monospace; font-size: 0.68rem; font-weight: 700;
|
||||
background: #5b9cf655; color: #5b9cf6; padding: 1px 5px; border-radius: 3px;
|
||||
font-family: monospace; font-size: 0.72rem; font-weight: 700;
|
||||
background: #5b9cf655; color: #5b9cf6; padding: 2px 6px; border-radius: 4px;
|
||||
}
|
||||
.head-leg { gap: 4px; }
|
||||
.head-leg { gap: 6px; }
|
||||
|
||||
.svg-scroll { overflow-x: auto; }
|
||||
.svg-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
|
||||
.gb-svg { display: block; overflow: visible; }
|
||||
|
||||
.gb-hint {
|
||||
padding: 8px 12px; background: var(--vp-c-bg-alt);
|
||||
padding: 10px 14px; background: var(--vp-c-bg-alt);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
font-size: 0.8rem; color: var(--vp-c-text-2); line-height: 1.5;
|
||||
font-size: 0.82rem; color: var(--vp-c-text-2); line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -127,6 +127,8 @@ const yLabels = computed(() => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 1rem;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
|
||||
@@ -1,39 +1,41 @@
|
||||
<template>
|
||||
<div class="gc-root">
|
||||
<!-- Terminal -->
|
||||
<div class="gc-terminal">
|
||||
<div class="term-bar">
|
||||
<span class="dot r" /><span class="dot y" /><span class="dot g" />
|
||||
<span class="term-title">~/project (main)</span>
|
||||
</div>
|
||||
<div ref="termEl" class="term-body">
|
||||
<div v-for="(l, i) in lines" :key="i" class="t-line">
|
||||
<span v-if="l.kind === 'cmd'" class="t-ps">$ </span>
|
||||
<span :class="'t-' + l.kind">{{ l.text }}</span>
|
||||
<div class="gc-layout">
|
||||
<!-- 左侧：终端 + 按钮 -->
|
||||
<div class="gc-left">
|
||||
<div class="gc-terminal">
|
||||
<div class="term-bar">
|
||||
<span class="dot r" /><span class="dot y" /><span class="dot g" />
|
||||
<span class="term-title">~/project (main)</span>
|
||||
</div>
|
||||
<div ref="termEl" class="term-body">
|
||||
<div v-for="(l, i) in lines" :key="i" class="t-line">
|
||||
<span v-if="l.kind === 'cmd'" class="t-ps">$ </span>
|
||||
<span :class="'t-' + l.kind">{{ l.text }}</span>
|
||||
</div>
|
||||
<div class="t-line">
|
||||
<span class="t-ps">$ </span>
|
||||
<span class="t-typing">{{ typing }}<span class="t-cur">▋</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-line">
|
||||
<span class="t-ps">$ </span>
|
||||
<span class="t-typing">{{ typing }}<span class="t-cur">▋</span></span>
|
||||
<div class="gc-btns">
|
||||
<button
|
||||
v-for="op in ops"
|
||||
:key="op.id"
|
||||
:disabled="running || !op.ok()"
|
||||
:class="['gc-btn', { 'gc-btn--on': active === op.id, 'gc-btn--dim': !op.ok() }]"
|
||||
@click="run(op)"
|
||||
>
|
||||
<code>{{ op.cmd }}</code>
|
||||
</button>
|
||||
<button class="gc-btn gc-btn--reset" :disabled="running" @click="reset">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="gc-btns">
|
||||
<button
|
||||
v-for="op in ops"
|
||||
:key="op.id"
|
||||
:disabled="running || !op.ok()"
|
||||
:class="['gc-btn', { 'gc-btn--on': active === op.id, 'gc-btn--dim': !op.ok() }]"
|
||||
@click="run(op)"
|
||||
>
|
||||
<code>{{ op.cmd }}</code>
|
||||
</button>
|
||||
<button class="gc-btn gc-btn--reset" :disabled="running" @click="reset">重置</button>
|
||||
</div>
|
||||
|
||||
<!-- 三区可视化 -->
|
||||
<div class="gc-three-areas">
|
||||
<!-- 右侧：三区缩小展示 -->
|
||||
<div class="gc-right">
|
||||
<div class="gc-three-areas">
|
||||
<div class="area-col area-work" :class="{ 'area-highlight': pulseArea === 'work' }">
|
||||
<div class="area-header">
|
||||
<span class="area-icon">📝</span>
|
||||
@@ -55,7 +57,8 @@
|
||||
|
||||
<div class="area-arrow" :class="{ 'arrow-lit': addDone }">
|
||||
<code class="arrow-cmd">git add</code>
|
||||
<span class="arrow-symbol">→</span>
|
||||
<span class="arrow-symbol arrow-symbol--h" aria-hidden="true">→</span>
|
||||
<span class="arrow-symbol arrow-symbol--v" aria-hidden="true">↓</span>
|
||||
</div>
|
||||
|
||||
<div class="area-col area-stage" :class="{ 'area-highlight': pulseArea === 'stage' }">
|
||||
@@ -79,7 +82,8 @@
|
||||
|
||||
<div class="area-arrow" :class="{ 'arrow-lit': commitDone }">
|
||||
<code class="arrow-cmd">git commit</code>
|
||||
<span class="arrow-symbol">→</span>
|
||||
<span class="arrow-symbol arrow-symbol--h" aria-hidden="true">→</span>
|
||||
<span class="arrow-symbol arrow-symbol--v" aria-hidden="true">↓</span>
|
||||
</div>
|
||||
|
||||
<div class="area-col area-repo" :class="{ 'area-highlight': pulseArea === 'repo' }">
|
||||
@@ -102,6 +106,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hint -->
|
||||
<div v-if="hint" class="gc-hint">💡 {{ hint }}</div>
|
||||
@@ -116,7 +122,7 @@ const lines = ref([{ kind: 'dim', text: '# 你刚改了 3 个文件，现在演
|
||||
const typing = ref('')
|
||||
const running = ref(false)
|
||||
const active = ref(null)
|
||||
const hint = ref('点击下方命令按钮，按顺序执行。观察上方三区里文件如何随命令移动。')
|
||||
const hint = ref('点击下方命令按钮，按顺序执行。观察右侧三区里文件如何随命令移动。')
|
||||
const pulseArea = ref(null)
|
||||
|
||||
const files = ref([
|
||||
@@ -275,7 +281,7 @@ function reset() {
|
||||
commitDone = false
|
||||
active.value = null
|
||||
pulseArea.value = null
|
||||
hint.value = '点击下方命令按钮，按顺序执行。观察上方三区里文件如何随命令移动。'
|
||||
hint.value = '点击下方命令按钮，按顺序执行。观察右侧三区里文件如何随命令移动。'
|
||||
typing.value = ''
|
||||
running.value = false
|
||||
}
|
||||
@@ -291,6 +297,29 @@ function reset() {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* 左右分栏：左终端+按钮，右三区缩小 */
|
||||
.gc-layout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
}
|
||||
.gc-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.gc-right {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.gc-layout { flex-direction: column; }
|
||||
.gc-right { width: 100%; border-left: none; border-top: 1px solid var(--vp-c-divider); }
|
||||
}
|
||||
|
||||
/* Terminal */
|
||||
.gc-terminal { background: #141420; }
|
||||
.term-bar {
|
||||
@@ -310,13 +339,14 @@ function reset() {
|
||||
min-height: 140px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
padding: 0.8rem 1rem;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 0.76rem;
|
||||
line-height: 1.65;
|
||||
color: #cdd6f4;
|
||||
}
|
||||
.t-line { display: flex; }
|
||||
.t-line { display: flex; min-width: min-content; }
|
||||
.t-ps { color: #a6e3a1; flex-shrink: 0; }
|
||||
.t-cmd { color: #cdd6f4; }
|
||||
.t-dim { color: #585b70; }
|
||||
@@ -357,33 +387,28 @@ function reset() {
|
||||
.gc-btn--reset code { display: none; }
|
||||
.gc-btn--reset::after { content: '重置'; font-size: 0.7rem; color: #585b70; }
|
||||
|
||||
/* 三区布局 */
|
||||
/* 三区布局：右侧缩小、垂直堆叠 */
|
||||
.gc-three-areas {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr auto 1fr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
padding: 12px 14px;
|
||||
padding: 10px 12px;
|
||||
background: var(--vp-c-bg);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
min-height: 180px;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.gc-three-areas {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto auto auto auto;
|
||||
}
|
||||
.area-arrow { transform: rotate(90deg); justify-self: center; }
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.area-col {
|
||||
border: 1.5px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
transition: border-color 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
.gc-right .area-col {
|
||||
min-height: 72px;
|
||||
}
|
||||
.area-col.area-highlight {
|
||||
border-color: var(--vp-c-brand);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-c-brand) 14%, transparent);
|
||||
@@ -393,50 +418,71 @@ function reset() {
|
||||
.area-repo { border-left: 4px solid #5b9cf6; }
|
||||
|
||||
.area-header {
|
||||
padding: 6px 10px;
|
||||
padding: 6px 8px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
min-width: 0;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.area-icon { font-size: 1rem; margin-right: 4px; }
|
||||
.gc-right .area-header { padding: 5px 8px; }
|
||||
.area-icon { font-size: 0.95rem; margin-right: 4px; flex-shrink: 0; }
|
||||
.gc-right .area-icon { font-size: 0.85rem; }
|
||||
.area-title {
|
||||
font-weight: 700;
|
||||
font-size: 0.88rem;
|
||||
font-size: 0.92rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.gc-right .area-title { font-size: 0.8rem; }
|
||||
.area-desc {
|
||||
display: block;
|
||||
font-size: 0.68rem;
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 2px;
|
||||
line-height: 1.3;
|
||||
margin-top: 4px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.gc-right .area-desc { font-size: 0.62rem; margin-top: 2px; }
|
||||
|
||||
.area-body {
|
||||
padding: 8px 10px;
|
||||
flex: 1;
|
||||
min-height: 72px;
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.gc-right .area-body { padding: 6px 8px; min-height: 40px; }
|
||||
.area-label {
|
||||
font-size: 0.68rem;
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 6px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.gc-right .area-label { font-size: 0.62rem; margin-bottom: 4px; }
|
||||
.area-empty {
|
||||
font-size: 0.74rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-3);
|
||||
font-style: italic;
|
||||
padding: 6px 0;
|
||||
}
|
||||
.gc-right .area-empty { font-size: 0.7rem; padding: 4px 0; }
|
||||
|
||||
.file-row,
|
||||
.commit-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 6px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.76rem;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 4px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.gc-right .file-row,
|
||||
.gc-right .commit-row {
|
||||
gap: 4px;
|
||||
padding: 4px 6px;
|
||||
font-size: 0.7rem;
|
||||
margin-bottom: 3px;
|
||||
min-height: 24px;
|
||||
}
|
||||
.file-row:last-child,
|
||||
.commit-row:last-child { margin-bottom: 0; }
|
||||
@@ -450,73 +496,91 @@ function reset() {
|
||||
}
|
||||
.file-badge {
|
||||
font-weight: 700;
|
||||
font-size: 0.72rem;
|
||||
width: 14px;
|
||||
font-size: 0.78rem;
|
||||
width: 16px;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.gc-right .file-badge { font-size: 0.68rem; width: 14px; }
|
||||
.file-mod .file-badge { color: #f38ba8; }
|
||||
.file-staged .file-badge { color: #a6e3a1; }
|
||||
.file-name { font-family: monospace; color: var(--vp-c-text-1); }
|
||||
.file-name {
|
||||
font-family: monospace;
|
||||
color: var(--vp-c-text-1);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
.gc-right .file-name { font-size: 0.68rem; }
|
||||
.file-state {
|
||||
margin-left: auto;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.74rem;
|
||||
color: var(--vp-c-text-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.gc-right .file-state { font-size: 0.62rem; }
|
||||
|
||||
.commit-row {
|
||||
background: #5b9cf618;
|
||||
border-left: 3px solid #5b9cf6;
|
||||
}
|
||||
.commit-badge { color: #5b9cf6; font-weight: 700; flex-shrink: 0; }
|
||||
.commit-badge { color: #5b9cf6; font-weight: 700; flex-shrink: 0; font-size: 0.9rem; }
|
||||
.gc-right .commit-badge { font-size: 0.75rem; }
|
||||
.commit-hash {
|
||||
font-family: monospace;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.78rem;
|
||||
color: #5b9cf6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.gc-right .commit-hash { font-size: 0.66rem; }
|
||||
.commit-msg {
|
||||
font-size: 0.72rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-2);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 3em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.gc-right .commit-msg { font-size: 0.66rem; min-width: 2em; }
|
||||
.commit-head {
|
||||
font-size: 0.64rem;
|
||||
font-size: 0.7rem;
|
||||
font-family: monospace;
|
||||
font-weight: 700;
|
||||
background: #5b9cf6;
|
||||
color: #fff;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.gc-right .commit-head { font-size: 0.6rem; padding: 1px 4px; }
|
||||
|
||||
/* 箭头：↓ + 命令 */
|
||||
.area-arrow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
gap: 6px;
|
||||
padding: 6px 0;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.gc-right .area-arrow { padding: 4px 0; }
|
||||
.area-arrow .arrow-symbol--h { display: none; }
|
||||
.area-arrow .arrow-symbol--v {
|
||||
display: inline;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-brand);
|
||||
line-height: 1;
|
||||
}
|
||||
.gc-right .area-arrow .arrow-symbol--v { font-size: 0.9rem; }
|
||||
.area-arrow.arrow-lit { opacity: 1; }
|
||||
.arrow-cmd {
|
||||
font-size: 0.66rem;
|
||||
font-size: 0.72rem;
|
||||
font-family: monospace;
|
||||
color: var(--vp-c-brand);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.arrow-symbol {
|
||||
font-size: 1.2rem;
|
||||
color: var(--vp-c-brand);
|
||||
line-height: 1;
|
||||
}
|
||||
.gc-right .arrow-cmd { font-size: 0.62rem; }
|
||||
|
||||
.gc-hint {
|
||||
padding: 10px 12px;
|
||||
|
||||
@@ -281,10 +281,12 @@ function reset() {
|
||||
|
||||
/* Repos */
|
||||
.gs-repos {
|
||||
display: grid; grid-template-columns: 1fr auto 1fr;
|
||||
gap: 8px; padding: 10px 12px;
|
||||
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
gap: 12px; padding: 16px 14px;
|
||||
background: var(--vp-c-bg); border-top: 1px solid var(--vp-c-divider);
|
||||
align-items: start;
|
||||
min-height: 200px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.gs-repos { grid-template-columns: 1fr; }
|
||||
@@ -293,7 +295,9 @@ function reset() {
|
||||
|
||||
.repo-card {
|
||||
border: 1.5px solid var(--vp-c-divider); border-radius: 8px;
|
||||
padding: 8px 10px; background: var(--vp-c-bg-soft);
|
||||
padding: 12px 14px; background: var(--vp-c-bg-soft);
|
||||
min-height: 180px; min-width: 0;
|
||||
display: flex; flex-direction: column;
|
||||
transition: border-color .3s, box-shadow .3s;
|
||||
}
|
||||
.repo-remote { border-color: #60a5fa44; background: color-mix(in srgb, #60a5fa 4%, var(--vp-c-bg-soft)); }
|
||||
@@ -301,26 +305,41 @@ function reset() {
|
||||
.repo-pulse-remote { border-color: #60a5fa !important; box-shadow: 0 0 0 3px #60a5fa22; }
|
||||
|
||||
.repo-header {
|
||||
display: flex; align-items: center; gap: 5px; margin-bottom: 6px; flex-wrap: wrap;
|
||||
display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
}
|
||||
.repo-icon { font-size: 1.1rem; flex-shrink: 0; }
|
||||
.repo-name { font-weight: 700; font-size: 0.88rem; flex-shrink: 0; }
|
||||
.repo-path {
|
||||
font-family: monospace; font-size: 0.7rem; color: var(--vp-c-text-3);
|
||||
margin-left: auto; min-width: 0; overflow: hidden;
|
||||
text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.repo-icon { font-size: 1rem; }
|
||||
.repo-name { font-weight: 700; font-size: 0.8rem; }
|
||||
.repo-path { font-family: monospace; font-size: 0.62rem; color: var(--vp-c-text-3); margin-left: auto; }
|
||||
|
||||
.commit-col { min-height: 48px; display: flex; flex-direction: column; gap: 4px; }
|
||||
.no-commits { color: var(--vp-c-text-3); font-size: 0.72rem; }
|
||||
.commit-col {
|
||||
min-height: 80px; min-width: 0;
|
||||
display: flex; flex-direction: column; gap: 6px; flex: 1;
|
||||
}
|
||||
.no-commits { color: var(--vp-c-text-3); font-size: 0.8rem; padding: 6px 0; }
|
||||
.cmt-row {
|
||||
display: flex; align-items: center; gap: 5px; font-size: 0.72rem;
|
||||
padding: 2px 4px; border-radius: 3px; transition: background .3s;
|
||||
display: flex; align-items: center; gap: 8px; font-size: 0.8rem;
|
||||
padding: 8px 10px; border-radius: 6px; min-height: 36px;
|
||||
min-width: 0; transition: background .3s;
|
||||
}
|
||||
.cmt-new { background: color-mix(in srgb, var(--vp-c-brand) 10%, transparent); }
|
||||
.cmt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
|
||||
.cmt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.local-dot { background: var(--vp-c-brand); }
|
||||
.remote-dot { background: #60a5fa; }
|
||||
.cmt-hash { color: var(--vp-c-brand); font-size: 0.68rem; }
|
||||
.cmt-msg { color: var(--vp-c-text-2); }
|
||||
.cmt-hash { color: var(--vp-c-brand); font-size: 0.76rem; flex-shrink: 0; }
|
||||
.cmt-msg {
|
||||
color: var(--vp-c-text-2);
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.repo-footer { margin-top: 5px; font-size: 0.7rem; min-height: 16px; }
|
||||
.repo-footer { margin-top: 10px; font-size: 0.76rem; min-height: 20px; }
|
||||
.badge-ahead { color: var(--vp-c-brand); font-weight: 600; }
|
||||
.badge-sync { color: #a6e3a1; }
|
||||
.badge-online { color: #60a5fa; }
|
||||
@@ -342,8 +361,8 @@ function reset() {
|
||||
.arrow-pull .arrow-label { color: #60a5fa; }
|
||||
|
||||
.gs-hint {
|
||||
padding: 8px 12px; background: var(--vp-c-bg-alt);
|
||||
padding: 10px 14px; background: var(--vp-c-bg-alt);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
font-size: 0.8rem; color: var(--vp-c-text-2);
|
||||
font-size: 0.82rem; color: var(--vp-c-text-2); line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -211,6 +211,15 @@ import BackpropagationDemo from './components/appendix/ai-history/Backpropagatio
|
||||
import AttentionMechanismDemo from './components/appendix/ai-history/AttentionMechanismDemo.vue'
|
||||
import DiscriminativeVsGenerativeDemo from './components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue'
|
||||
import GPTEvolutionDemo from './components/appendix/ai-history/GPTEvolutionDemo.vue'
|
||||
import FoundationDemo from './components/appendix/ai-history/FoundationDemo.vue'
|
||||
|
||||
// AI Protocols Components
|
||||
import McpVisualDemo from './components/appendix/ai-protocols/McpVisualDemo.vue'
|
||||
import A2AVisualDemo from './components/appendix/ai-protocols/A2AVisualDemo.vue'
|
||||
import McpDetailedDemo from './components/appendix/ai-protocols/McpDetailedDemo.vue'
|
||||
import A2ADetailedDemo from './components/appendix/ai-protocols/A2ADetailedDemo.vue'
|
||||
import ProtocolComparisonDemo from './components/appendix/ai-protocols/ProtocolComparisonDemo.vue'
|
||||
import ProtocolWorkflowDemo from './components/appendix/ai-protocols/ProtocolWorkflowDemo.vue'
|
||||
|
||||
import ImperativeVsDeclarativeDemo from './components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue'
|
||||
import ComponentReusabilityDemo from './components/appendix/web-basics/ComponentReusabilityDemo.vue'
|
||||
@@ -543,12 +552,7 @@ import HttpsOptimizationDemo from './components/appendix/cloud-storage-cdn/Https
|
||||
import AccessAnalyticsDemo from './components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue'
|
||||
|
||||
// API Design Extra Components
|
||||
import ErrorHandlingDemo from './components/appendix/api-design/ErrorHandlingDemo.vue'
|
||||
import VersioningStrategyDemo from './components/appendix/api-design/VersioningStrategyDemo.vue'
|
||||
import DocumentationDemo from './components/appendix/api-design/DocumentationDemo.vue'
|
||||
import ResourceAnalogy from './components/appendix/api-design/ResourceAnalogy.vue'
|
||||
import RequestStructureDemo from './components/appendix/api-design/RequestStructureDemo.vue'
|
||||
import ResponseStructureDemo from './components/appendix/api-design/ResponseStructureDemo.vue'
|
||||
import RestfulApiFlow from './components/appendix/api-design/RestfulApiFlow.vue'
|
||||
|
||||
// JavaScript Intro Components
|
||||
import VariableBoxDemo from './components/appendix/javascript-intro/VariableBoxDemo.vue'
|
||||
@@ -638,6 +642,7 @@ export default {
|
||||
app.component('ApiDocumentDemo', ApiDocumentDemo)
|
||||
app.component('ApiPlayground', ApiPlayground)
|
||||
app.component('RealWorldApiDemo', RealWorldApiDemo)
|
||||
app.component('RestfulApiFlow', RestfulApiFlow)
|
||||
|
||||
// LLM Intro Components Registration
|
||||
app.component('EmbeddingDemo', EmbeddingDemo)
|
||||
@@ -804,6 +809,7 @@ export default {
|
||||
app.component('RenderingStrategyDemo', RenderingStrategyDemo)
|
||||
app.component('BigFrontendScopeDemo', BigFrontendScopeDemo)
|
||||
app.component('AiEvolutionDemo', AiEvolutionDemo)
|
||||
app.component('FoundationDemo', FoundationDemo)
|
||||
app.component('RuleBasedVsLearningDemo', RuleBasedVsLearningDemo)
|
||||
app.component('PerceptronDemo', PerceptronDemo)
|
||||
app.component('AIEvolutionTimelineDemo', AIEvolutionTimelineDemo)
|
||||
@@ -820,6 +826,14 @@ export default {
|
||||
)
|
||||
app.component('GPTEvolutionDemo', GPTEvolutionDemo)
|
||||
|
||||
// AI Protocols Components Registration
|
||||
app.component('McpVisualDemo', McpVisualDemo)
|
||||
app.component('A2AVisualDemo', A2AVisualDemo)
|
||||
app.component('McpDetailedDemo', McpDetailedDemo)
|
||||
app.component('A2ADetailedDemo', A2ADetailedDemo)
|
||||
app.component('ProtocolComparisonDemo', ProtocolComparisonDemo)
|
||||
app.component('ProtocolWorkflowDemo', ProtocolWorkflowDemo)
|
||||
|
||||
app.component('ImperativeVsDeclarativeDemo', ImperativeVsDeclarativeDemo)
|
||||
app.component('ComponentReusabilityDemo', ComponentReusabilityDemo)
|
||||
app.component('FrameworkMotivationDemo', FrameworkMotivationDemo)
|
||||
|
||||
Reference in New Issue
Block a user