feat(docs): update computer fundamentals content and demos
- Refactor frontend framework demo descriptions for clarity - Remove interactive features from triad and field map demos - Add new computer organization and DSL documentation links - Split type systems and compilers into separate pages - Enhance power-on-to-web article with relay race analogy - Add new interactive demos for type systems and compilation - Improve visual presentation of boot process and hardware flow - Introduce new Vibe Coding flow demo component
This commit is contained in:
sanbuphy
+101
-138
@@ -1,17 +1,13 @@
|
||||
<template>
|
||||
<div class="ai-vs-traditional-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">🤖</span>
|
||||
<span class="title">AI 工程师 vs 传统工程师</span>
|
||||
<span class="subtitle">工作方式的差异</span>
|
||||
</div>
|
||||
|
||||
<div class="comparison-container">
|
||||
<div class="comparison-column traditional">
|
||||
<div class="column-header">
|
||||
<span class="col-icon">👨💻</span>
|
||||
<span class="col-title">传统工程师</span>
|
||||
</div>
|
||||
<div class="column-header">传统工程师</div>
|
||||
<div class="work-flow">
|
||||
<div v-for="(step, index) in traditionalSteps" :key="index" class="flow-step">
|
||||
<span class="step-num">{{ index + 1 }}</span>
|
||||
@@ -35,10 +31,7 @@
|
||||
</div>
|
||||
|
||||
<div class="comparison-column ai">
|
||||
<div class="column-header">
|
||||
<span class="col-icon">🤖</span>
|
||||
<span class="col-title">AI 工程师</span>
|
||||
</div>
|
||||
<div class="column-header">AI 工程师</div>
|
||||
<div class="work-flow">
|
||||
<div v-for="(step, index) in aiSteps" :key="index" class="flow-step">
|
||||
<span class="step-num">{{ index + 1 }}</span>
|
||||
@@ -59,7 +52,7 @@
|
||||
</div>
|
||||
|
||||
<div class="skill-shift">
|
||||
<div class="shift-title">📊 能力重心转移</div>
|
||||
<div class="shift-title">能力重心转移</div>
|
||||
<div class="shift-grid">
|
||||
<div v-for="item in skillShift" :key="item.from" class="shift-item">
|
||||
<div class="shift-from">
|
||||
@@ -76,159 +69,142 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ai-insight">
|
||||
<div class="insight-icon">💡</div>
|
||||
<div class="insight-text">
|
||||
<strong>AI 时代的核心竞争力：</strong>不是"会写代码"，而是"会描述需求、会判断对错、会设计方案"。AI 是你的编程助手，但<strong>决策者永远是你</strong>。
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<strong>AI 时代的核心竞争力：</strong>不是"会写代码"，而是"会描述需求、会判断对错、会设计方案"。AI 是你的编程助手，但决策者永远是你。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const traditionalSteps = ref([
|
||||
const traditionalSteps = [
|
||||
'理解需求',
|
||||
'查阅文档学习语法',
|
||||
'手写代码实现',
|
||||
'调试修复 Bug',
|
||||
'优化代码性能',
|
||||
'编写测试用例'
|
||||
])
|
||||
]
|
||||
|
||||
const aiSteps = ref([
|
||||
const aiSteps = [
|
||||
'理解需求',
|
||||
'用自然语言描述给 AI',
|
||||
'审核 AI 生成的代码',
|
||||
'判断是否符合预期',
|
||||
'调整需求重新生成',
|
||||
'整合到项目中'
|
||||
])
|
||||
]
|
||||
|
||||
const skillShift = ref([
|
||||
const skillShift = [
|
||||
{ from: '语法记忆', to: '需求描述能力' },
|
||||
{ from: '手写代码速度', to: '代码审核能力' },
|
||||
{ from: '查文档能力', to: '架构设计能力' },
|
||||
{ from: '调试技巧', to: '问题定位能力' }
|
||||
])
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ai-vs-traditional-demo {
|
||||
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin: 20px 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid #fed7aa;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 28px;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.comparison-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comparison-column {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.column-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.col-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
font-size: 16px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px dashed var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.work-flow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #e2e8f0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
background: var(--vp-c-divider);
|
||||
color: var(--vp-c-text-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.traditional .step-num {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
background: var(--vp-c-indigo-soft);
|
||||
color: var(--vp-c-indigo-1);
|
||||
}
|
||||
|
||||
.ai .step-num {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
background: var(--vp-c-green-soft);
|
||||
color: var(--vp-c-green-1);
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.column-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
gap: 0.35rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
@@ -238,14 +214,14 @@ const skillShift = ref([
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 14px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
@@ -255,115 +231,102 @@ const skillShift = ref([
|
||||
}
|
||||
|
||||
.vs-text {
|
||||
font-size: 18px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: #f97316;
|
||||
background: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
color: var(--vp-c-brand-1);
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.35rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skill-shift {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 24px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.shift-title {
|
||||
font-size: 16px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 16px;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.shift-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.shift-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
gap: 0.35rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.shift-from,
|
||||
.shift-to {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 14px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.shift-from .arrow {
|
||||
color: #ef4444;
|
||||
color: var(--vp-c-danger-1);
|
||||
}
|
||||
|
||||
.shift-to .arrow {
|
||||
color: #22c55e;
|
||||
color: var(--vp-c-green-1);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.trend {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.62rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.trend.down {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
background: var(--vp-c-danger-soft);
|
||||
color: var(--vp-c-danger-1);
|
||||
}
|
||||
|
||||
.trend.up {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
background: var(--vp-c-green-soft);
|
||||
color: var(--vp-c-green-1);
|
||||
}
|
||||
|
||||
.ai-insight {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
border-left: 4px solid #f97316;
|
||||
.info-box {
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
border-left: 3px solid var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.insight-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.insight-text strong {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 640px) {
|
||||
.comparison-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
padding: 8px 0;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
|
||||
.shift-grid {
|
||||
|
||||
+192
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="ast-visualizer-demo">
|
||||
<h4>🌳 AST 可视化：看见代码的"骨架"</h4>
|
||||
<p class="desc">选择一个表达式，观察它的抽象语法树结构</p>
|
||||
|
||||
<div class="expr-selector">
|
||||
<button
|
||||
v-for="(ex, i) in expressions"
|
||||
:key="i"
|
||||
:class="['expr-btn', { active: selected === i }]"
|
||||
@click="selected = i"
|
||||
>
|
||||
<code>{{ ex.code }}</code>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ast-container">
|
||||
<div class="tree-view">
|
||||
<div class="tree-title">语法树</div>
|
||||
<div class="tree-nodes">
|
||||
<ASTNode
|
||||
:node="expressions[selected].tree"
|
||||
:depth="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explain-view">
|
||||
<div class="explain-title">解析说明</div>
|
||||
<div class="explain-list">
|
||||
<div v-for="(step, j) in expressions[selected].explains" :key="j" class="explain-item">
|
||||
<span class="explain-num">{{ j + 1 }}</span>
|
||||
<span>{{ step }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool-tip">
|
||||
💡 试试 <a href="https://astexplorer.net/" target="_blank">AST Explorer</a> — 在线查看任意代码的 AST
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, h, defineComponent } from 'vue'
|
||||
|
||||
const selected = ref(0)
|
||||
|
||||
const ASTNode = defineComponent({
|
||||
name: 'ASTNode',
|
||||
props: { node: Object, depth: Number },
|
||||
setup(props) {
|
||||
return () => {
|
||||
const n = props.node
|
||||
const children = []
|
||||
|
||||
children.push(
|
||||
h('div', { class: 'node-box', style: { marginLeft: props.depth * 24 + 'px' } }, [
|
||||
h('span', { class: 'node-type' }, n.type),
|
||||
n.value ? h('span', { class: 'node-value' }, n.value) : null
|
||||
])
|
||||
)
|
||||
|
||||
if (n.children) {
|
||||
for (const child of n.children) {
|
||||
children.push(h(ASTNode, { node: child, depth: props.depth + 1 }))
|
||||
}
|
||||
}
|
||||
|
||||
return h('div', { class: 'node-wrapper' }, children)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const expressions = [
|
||||
{
|
||||
code: '1 + 2 * 3',
|
||||
tree: {
|
||||
type: 'BinaryExpression', value: '+',
|
||||
children: [
|
||||
{ type: 'NumericLiteral', value: '1' },
|
||||
{
|
||||
type: 'BinaryExpression', value: '*',
|
||||
children: [
|
||||
{ type: 'NumericLiteral', value: '2' },
|
||||
{ type: 'NumericLiteral', value: '3' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
explains: [
|
||||
'* 优先级高于 +，所以 2 * 3 先结合',
|
||||
'2 * 3 形成一个 BinaryExpression 子树',
|
||||
'1 和这个子树作为 + 的左右操作数',
|
||||
'最终 + 是根节点，体现了运算顺序'
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'let x = 10',
|
||||
tree: {
|
||||
type: 'VariableDeclaration', value: 'let',
|
||||
children: [
|
||||
{
|
||||
type: 'VariableDeclarator', value: '',
|
||||
children: [
|
||||
{ type: 'Identifier', value: 'x' },
|
||||
{ type: 'NumericLiteral', value: '10' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
explains: [
|
||||
'let 声明创建 VariableDeclaration 节点',
|
||||
'内部包含一个 VariableDeclarator（声明器）',
|
||||
'声明器左侧是标识符 x，右侧是初始值 10',
|
||||
'树结构清晰表达了"把 10 赋给 x"的语义'
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'add(a, b)',
|
||||
tree: {
|
||||
type: 'CallExpression', value: '',
|
||||
children: [
|
||||
{ type: 'Identifier', value: 'add' },
|
||||
{
|
||||
type: 'Arguments', value: '',
|
||||
children: [
|
||||
{ type: 'Identifier', value: 'a' },
|
||||
{ type: 'Identifier', value: 'b' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
explains: [
|
||||
'函数调用创建 CallExpression 节点',
|
||||
'被调用的函数名 add 是 Identifier',
|
||||
'参数列表 (a, b) 形成 Arguments 节点',
|
||||
'每个参数都是独立的 Identifier 子节点'
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ast-visualizer-demo {
|
||||
padding: 20px; border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
.expr-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.expr-btn {
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
|
||||
}
|
||||
.expr-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
|
||||
.expr-btn code { font-size: 13px; }
|
||||
.ast-container { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.tree-view, .explain-view {
|
||||
border: 1px solid var(--vp-c-divider); border-radius: 8px;
|
||||
background: var(--vp-c-bg); overflow: hidden;
|
||||
}
|
||||
.tree-title, .explain-title {
|
||||
padding: 8px 12px; font-weight: 600; font-size: 13px;
|
||||
background: var(--vp-c-bg-soft); border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
.tree-nodes { padding: 12px; }
|
||||
:deep(.node-box) {
|
||||
display: flex; align-items: center; gap: 6px; padding: 3px 0;
|
||||
}
|
||||
:deep(.node-type) {
|
||||
padding: 2px 8px; background: #dbeafe; color: #1e40af;
|
||||
border-radius: 4px; font-size: 12px; font-weight: 500;
|
||||
}
|
||||
:deep(.node-value) {
|
||||
padding: 2px 6px; background: #fef3c7; color: #92400e;
|
||||
border-radius: 4px; font-size: 12px; font-family: 'Fira Code', monospace;
|
||||
}
|
||||
.explain-list { padding: 10px 12px; }
|
||||
.explain-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; }
|
||||
.explain-num {
|
||||
width: 20px; height: 20px; border-radius: 50%; background: var(--vp-c-brand-1);
|
||||
color: #fff; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 11px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.tool-tip {
|
||||
padding: 8px 12px; font-size: 12px; color: var(--vp-c-text-2);
|
||||
border-top: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
|
||||
}
|
||||
.tool-tip a { color: var(--vp-c-brand-1); }
|
||||
@media (max-width: 640px) { .ast-container { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
+481
@@ -0,0 +1,481 @@
|
||||
<template>
|
||||
<div class="addressing-mode-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">寻址方式</span>
|
||||
<span class="subtitle">如何找到操作数的位置</span>
|
||||
</div>
|
||||
|
||||
<div class="mode-selector">
|
||||
<button
|
||||
v-for="mode in addressingModes"
|
||||
:key="mode.name"
|
||||
:class="['mode-btn', { active: selectedMode === mode.name }]"
|
||||
@click="selectMode(mode)"
|
||||
>
|
||||
{{ mode.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mode-details" v-if="selectedModeData">
|
||||
<div class="detail-header">
|
||||
<span class="mode-name">{{ selectedModeData.name }}</span>
|
||||
<span class="mode-english">{{ selectedModeData.english }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-content">
|
||||
<div class="detail-section">
|
||||
<div class="section-title">定义</div>
|
||||
<div class="section-content">{{ selectedModeData.definition }}</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="section-title">指令格式</div>
|
||||
<div class="instruction-example">
|
||||
<code>{{ selectedModeData.format }}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="section-title">示例</div>
|
||||
<div class="example-code">
|
||||
<div class="code-line">{{ selectedModeData.example.assembly }}</div>
|
||||
<div class="code-desc">{{ selectedModeData.example.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="section-title">执行过程</div>
|
||||
<div class="execution-flow">
|
||||
<div v-for="(step, i) in selectedModeData.steps" :key="i" class="flow-step">
|
||||
<span class="step-num">{{ i + 1 }}</span>
|
||||
<span class="step-text">{{ step }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="section-title">特点</div>
|
||||
<div class="characteristics">
|
||||
<div class="char-item" :class="selectedModeData.fast ? 'fast' : 'slow'">
|
||||
<span class="char-label">速度</span>
|
||||
<span class="char-value">{{ selectedModeData.fast ? '快' : '慢' }}</span>
|
||||
</div>
|
||||
<div class="char-item">
|
||||
<span class="char-label">灵活性</span>
|
||||
<span class="char-value">{{ selectedModeData.flexibility }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-table">
|
||||
<div class="table-title">寻址方式对比</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>寻址方式</th>
|
||||
<th>格式</th>
|
||||
<th>速度</th>
|
||||
<th>用途</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="mode in addressingModes" :key="mode.name">
|
||||
<td>{{ mode.name }}</td>
|
||||
<td><code>{{ mode.format }}</code></td>
|
||||
<td :class="mode.fast ? 'fast' : 'slow'">{{ mode.fast ? '最快' : '较快' }}</td>
|
||||
<td>{{ mode.usage }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selectedMode = ref('立即数寻址')
|
||||
const selectedModeData = ref(null)
|
||||
|
||||
const addressingModes = ref([
|
||||
{
|
||||
name: '立即数寻址',
|
||||
english: 'Immediate Addressing',
|
||||
definition: '操作数直接包含在指令中，作为指令的一部分立即可用',
|
||||
format: 'MOV R1, #100',
|
||||
usage: '常数赋值、初始化',
|
||||
fast: true,
|
||||
flexibility: '低',
|
||||
example: {
|
||||
assembly: 'MOV R1, #100 ; R1 = 100',
|
||||
description: '立即数 100 直接存在于指令中，无需访问任何寄存器或内存'
|
||||
},
|
||||
steps: [
|
||||
'CPU 从指令中直接读取立即数 100',
|
||||
'将立即数写入目标寄存器 R1',
|
||||
'执行完成，无需额外内存访问'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '寄存器寻址',
|
||||
english: 'Register Addressing',
|
||||
definition: '操作数位于 CPU 内部的寄存器中',
|
||||
format: 'MOV R1, R2',
|
||||
usage: '寄存器间数据传送',
|
||||
fast: true,
|
||||
flexibility: '中',
|
||||
example: {
|
||||
assembly: 'MOV R1, R2 ; R1 = R2',
|
||||
description: '从源寄存器 R2 读取数据，存入目标寄存器 R1'
|
||||
},
|
||||
steps: [
|
||||
'CPU 从寄存器组中读取 R2 的值',
|
||||
'将值写入目标寄存器 R1',
|
||||
'执行完成，无需访问内存'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '直接寻址',
|
||||
english: 'Direct Addressing',
|
||||
definition: '指令中直接给出操作数的内存地址',
|
||||
format: 'MOV R1, [100]',
|
||||
usage: '访问全局变量',
|
||||
fast: false,
|
||||
flexibility: '高',
|
||||
example: {
|
||||
assembly: 'MOV R1, [0x1000] ; R1 = M[0x1000]',
|
||||
description: '指令中包含内存地址 0x1000，从该地址读取数据'
|
||||
},
|
||||
steps: [
|
||||
'CPU 从指令中解析出地址 0x1000',
|
||||
'将地址送入 MAR（内存地址寄存器）',
|
||||
'访问内存，从地址 0x1000 读取数据到 MDR',
|
||||
'将数据从 MDR 写入目标寄存器 R1'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '间接寻址',
|
||||
english: 'Indirect Addressing',
|
||||
definition: '指令中给出寄存器，寄存器中存放操作数的地址',
|
||||
format: 'MOV R1, [R2]',
|
||||
usage: '指针操作、数组遍历',
|
||||
fast: false,
|
||||
flexibility: '高',
|
||||
example: {
|
||||
assembly: 'MOV R1, [R2] ; R1 = M[R2]',
|
||||
description: 'R2 中存放地址，从该地址读取数据'
|
||||
},
|
||||
steps: [
|
||||
'CPU 从寄存器 R2 中读取地址',
|
||||
'将地址送入 MAR',
|
||||
'访问内存，读取数据到 MDR',
|
||||
'将数据写入目标寄存器 R1'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '变址寻址',
|
||||
english: 'Indexed Addressing',
|
||||
definition: '指令中给出基地址加上变址寄存器的值作为操作数地址',
|
||||
format: 'MOV R1, [R2 + R3]',
|
||||
usage: '数组访问、循环',
|
||||
fast: false,
|
||||
flexibility: '高',
|
||||
example: {
|
||||
assembly: 'MOV R1, [R2 + R3] ; R1 = M[R2+R3]',
|
||||
description: '有效地址 = R2 + R3，用于数组元素访问'
|
||||
},
|
||||
steps: [
|
||||
'CPU 读取基地址寄存器 R2 的值',
|
||||
'CPU 读取变址寄存器 R3 的值',
|
||||
'ALU 计算有效地址 = R2 + R3',
|
||||
'将有效地址送入 MAR',
|
||||
'访问内存，读取数据到 MDR',
|
||||
'将数据写入目标寄存器 R1'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '基址寻址',
|
||||
english: 'Based Addressing',
|
||||
definition: '指令中给出基址寄存器加上偏移量作为操作数地址',
|
||||
format: 'MOV R1, [R2 + 100]',
|
||||
usage: '结构体访问、函数参数',
|
||||
fast: false,
|
||||
flexibility: '高',
|
||||
example: {
|
||||
assembly: 'MOV R1, [RBP - 8] ; 访问栈帧中的局部变量',
|
||||
description: '有效地址 = RBP - 8，用于访问函数栈帧中的变量'
|
||||
},
|
||||
steps: [
|
||||
'CPU 读取基址寄存器 RBP 的值',
|
||||
'计算有效地址 = RBP - 8',
|
||||
'将有效地址送入 MAR',
|
||||
'访问内存，读取数据'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '相对寻址',
|
||||
english: 'Relative Addressing',
|
||||
definition: '操作数地址是当前指令地址加上一个偏移量',
|
||||
format: 'JMP LABEL',
|
||||
usage: '循环、条件跳转',
|
||||
fast: true,
|
||||
flexibility: '高',
|
||||
example: {
|
||||
assembly: 'JMP LOOP ; 跳转到 LOOP 标签处',
|
||||
description: '跳转目标地址 = PC + 偏移量，用于循环和分支'
|
||||
},
|
||||
steps: [
|
||||
'CPU 计算跳转目标地址 = 当前 PC + 偏移量',
|
||||
'将目标地址写入 PC',
|
||||
'下一条指令从新地址开始执行'
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const selectMode = (mode) => {
|
||||
selectedMode.value = mode.name
|
||||
selectedModeData.value = mode
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.addressing-mode-demo {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mode-selector {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
padding: 8px 14px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
border-color: #f59e0b;
|
||||
background: #fef3c7;
|
||||
}
|
||||
|
||||
.mode-details {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.mode-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.mode-english {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
margin-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
font-size: 14px;
|
||||
color: #1e293b;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.instruction-example {
|
||||
background: #f1f5f9;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.instruction-example code {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.example-code {
|
||||
background: #f1f5f9;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.code-line {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
color: #0369a1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.code-desc {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.execution-flow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
background: #f8fafc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.characteristics {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.char-item {
|
||||
padding: 8px 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.char-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.char-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.char-item.fast .char-value {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.char-item.slow .char-value {
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.comparison-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.comparison-table th {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.comparison-table td {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.comparison-table code {
|
||||
font-size: 11px;
|
||||
background: #f1f5f9;
|
||||
padding: 2px 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.fast {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.slow {
|
||||
color: #ea580c;
|
||||
}
|
||||
</style>
|
||||
+30
-85
@@ -1,38 +1,27 @@
|
||||
<template>
|
||||
<div class="boot-demo">
|
||||
<div class="demo-label">操作系统启动流程 ── 点击逐步启动</div>
|
||||
|
||||
<div class="demo-title">操作系统启动流程</div>
|
||||
<div class="timeline">
|
||||
<div
|
||||
v-for="(step, index) in steps"
|
||||
:key="step.name"
|
||||
class="timeline-item"
|
||||
:class="{ active: currentStep >= index }"
|
||||
@click="currentStep = index"
|
||||
>
|
||||
<div class="timeline-marker">
|
||||
<span class="marker-dot" :class="{ filled: currentStep >= index }">{{ index + 1 }}</span>
|
||||
<span v-if="index < steps.length - 1" class="marker-line" :class="{ filled: currentStep >= index }"></span>
|
||||
<div v-for="(step, i) in steps" :key="step.name" class="timeline-item">
|
||||
<div class="marker">
|
||||
<span class="dot">{{ i + 1 }}</span>
|
||||
<span v-if="i < steps.length - 1" class="line"></span>
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="content">
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tap-hint">👆 点击查看各步骤</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const currentStep = ref(0)
|
||||
const steps = [
|
||||
{ name: '引导程序', desc: '从硬盘读取 bootloader' },
|
||||
{ name: '内核加载', desc: '加载操作系统内核' },
|
||||
{ name: '系统服务', desc: '启动各种后台服务' },
|
||||
{ name: '桌面环境', desc: '显示登录界面和桌面' }
|
||||
{ name: '引导程序 Bootloader', desc: '从硬盘启动扇区读取引导代码，找到操作系统内核的位置' },
|
||||
{ name: '内核加载 Kernel', desc: '将内核载入内存，接管 CPU、内存、设备的控制权' },
|
||||
{ name: '系统服务启动', desc: '启动网络、安全、音频等后台服务（Windows 服务 / Linux systemd）' },
|
||||
{ name: '桌面环境显示', desc: '加载显卡驱动 → 启动显示服务 → 渲染桌面背景和图标' }
|
||||
]
|
||||
</script>
|
||||
|
||||
@@ -43,95 +32,51 @@ const steps = [
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
.demo-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
padding: 0.3rem 0;
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.timeline-item.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
.timeline { display: flex; flex-direction: column; }
|
||||
.timeline-item { display: flex; gap: 0.7rem; }
|
||||
.marker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 1.5rem;
|
||||
width: 1.6rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.marker-dot {
|
||||
.dot {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-3);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.marker-dot.filled {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.marker-line {
|
||||
.line {
|
||||
flex: 1;
|
||||
width: 2px;
|
||||
background: var(--vp-c-divider);
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
.marker-line.filled {
|
||||
background: var(--vp-c-brand);
|
||||
opacity: 0.3;
|
||||
min-height: 1.2rem;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
padding-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.content { flex: 1; padding-bottom: 0.8rem; }
|
||||
.step-name {
|
||||
font-size: 0.78rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.tap-hint {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
+55
-95
@@ -1,44 +1,41 @@
|
||||
<template>
|
||||
<div class="browser-demo">
|
||||
<div class="demo-label">浏览器架构 ── 点击查看各模块</div>
|
||||
|
||||
<div class="browser-schema">
|
||||
<div class="browser-layers">
|
||||
<div
|
||||
v-for="layer in layers"
|
||||
:key="layer.name"
|
||||
class="layer"
|
||||
:class="{ active: activeLayer === layer.name }"
|
||||
@click="activeLayer = activeLayer === layer.name ? '' : layer.name"
|
||||
>
|
||||
<div class="layer-header">
|
||||
<span class="layer-name">{{ layer.name }}</span>
|
||||
<span class="layer-icon">{{ layer.icon }}</span>
|
||||
</div>
|
||||
<div v-if="activeLayer === layer.name" class="layer-detail">
|
||||
<div class="detail-text">{{ layer.desc }}</div>
|
||||
<div class="detail-examples">
|
||||
<span v-for="ex in layer.examples" :key="ex" class="example-tag">{{ ex }}</span>
|
||||
<div class="demo-title">浏览器架构 ── 点击模块查看详情</div>
|
||||
<div class="arch">
|
||||
<div
|
||||
v-for="mod in modules"
|
||||
:key="mod.name"
|
||||
class="mod-card"
|
||||
:class="{ active: active === mod.name }"
|
||||
@click="active = active === mod.name ? '' : mod.name"
|
||||
>
|
||||
<div class="mod-header">
|
||||
<span class="mod-icon">{{ mod.icon }}</span>
|
||||
<span class="mod-name">{{ mod.name }}</span>
|
||||
</div>
|
||||
<transition name="expand">
|
||||
<div v-if="active === mod.name" class="mod-detail">
|
||||
<div class="mod-desc">{{ mod.desc }}</div>
|
||||
<div class="mod-tags">
|
||||
<span v-for="tag in mod.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tap-hint">👆 点击查看各模块详情</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const activeLayer = ref('')
|
||||
const layers = [
|
||||
{ name: '用户界面', icon: '🎨', desc: '你看到的地址栏、标签页、书签等', examples: ['地址栏', '标签页', '书签栏', '工具栏'] },
|
||||
{ name: '浏览器引擎', icon: '⚙️', desc: '协调 UI 和渲染引擎的桥梁', examples: ['Chrome: Blink', 'Firefox: Gecko', 'Safari: WebKit'] },
|
||||
{ name: '渲染引擎', icon: '📄', desc: '解析 HTML/CSS，把网页显示出来', examples: ['Blink', 'Gecko', 'WebKit'] },
|
||||
{ name: 'JavaScript 引擎', icon: '⚡', desc: '执行页面中的 JavaScript 代码', examples: ['V8', 'SpiderMonkey', 'JavaScriptCore'] },
|
||||
{ name: '网络模块', icon: '🌐', desc: '发送 HTTP/HTTPS 请求', examples: ['HTTP', 'HTTP/2', 'HTTP/3', 'WebSocket'] },
|
||||
{ name: '数据存储', icon: '💾', desc: '保存 Cookie、缓存等数据', examples: ['Cookie', 'LocalStorage', 'Cache'] }
|
||||
const active = ref('')
|
||||
const modules = [
|
||||
{ icon: '🎨', name: '用户界面', desc: '你直接看到和操作的部分：地址栏、标签页、书签、前进/后退按钮', tags: ['地址栏', '标签页', '书签栏'] },
|
||||
{ icon: '🔗', name: '浏览器引擎', desc: '连接用户界面和渲染引擎的桥梁，负责协调两者之间的通信', tags: ['Blink', 'Gecko', 'WebKit'] },
|
||||
{ icon: '📄', name: '渲染引擎', desc: '解析 HTML 和 CSS，将代码转换成你看到的网页画面', tags: ['HTML 解析', 'CSS 计算', '布局绘制'] },
|
||||
{ icon: '⚡', name: 'JavaScript 引擎', desc: '执行网页中的 JavaScript 代码，实现页面的动态交互效果', tags: ['V8', 'SpiderMonkey', 'JavaScriptCore'] },
|
||||
{ icon: '🌐', name: '网络模块', desc: '负责发送 HTTP 请求、接收服务器响应，是浏览器与外界通信的通道', tags: ['HTTP/2', 'HTTP/3', 'WebSocket'] },
|
||||
{ icon: '💾', name: '数据存储', desc: '在本地保存网站数据，让你下次访问更快、不用重复登录', tags: ['Cookie', 'LocalStorage', 'Cache'] }
|
||||
]
|
||||
</script>
|
||||
|
||||
@@ -49,82 +46,45 @@ const layers = [
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
.demo-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.browser-layers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.arch {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.layer {
|
||||
.mod-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.7rem;
|
||||
transition: all 0.3s;
|
||||
padding: 0.5rem 0.6rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.layer.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.layer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layer-name {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.layer-icon {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.layer-detail {
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.detail-examples {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.example-tag {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
.mod-card.active { border-color: var(--vp-c-brand); }
|
||||
.mod-header { display: flex; align-items: center; gap: 0.4rem; }
|
||||
.mod-icon { font-size: 1rem; }
|
||||
.mod-name { font-size: 0.72rem; font-weight: 600; color: var(--vp-c-text-1); }
|
||||
.mod-detail { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--vp-c-divider); }
|
||||
.mod-desc { font-size: 0.65rem; color: var(--vp-c-text-3); line-height: 1.5; }
|
||||
.mod-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
|
||||
.tag {
|
||||
font-size: 0.6rem;
|
||||
padding: 0.1rem 0.35rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 3px;
|
||||
color: var(--vp-c-text-2);
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.tap-hint {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.75rem;
|
||||
.expand-enter-active, .expand-leave-active { transition: all 0.2s ease; }
|
||||
.expand-enter-from, .expand-leave-to { opacity: 0; max-height: 0; }
|
||||
.expand-enter-to, .expand-leave-from { opacity: 1; max-height: 8rem; }
|
||||
@media (max-width: 480px) {
|
||||
.arch { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,405 @@
|
||||
<template>
|
||||
<div class="bus-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">计算机总线系统</span>
|
||||
<span class="subtitle">地址总线、数据总线、控制总线</span>
|
||||
</div>
|
||||
|
||||
<div class="bus-architecture">
|
||||
<div class="cpu-box">
|
||||
<div class="component-label">CPU</div>
|
||||
<div class="cpu-internal">
|
||||
<div class="cu">控制单元</div>
|
||||
<div class="alu">运算单元</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bus-section">
|
||||
<div class="bus-line address-bus" :class="{ active: activeBus === 'address' }">
|
||||
<span class="bus-name">地址总线</span>
|
||||
<span class="bus-width">32位</span>
|
||||
<div class="bus-data" v-if="activeBus === 'address'">{{ addressValue }}</div>
|
||||
</div>
|
||||
<div class="bus-line data-bus" :class="{ active: activeBus === 'data' }">
|
||||
<span class="bus-name">数据总线</span>
|
||||
<span class="bus-width">64位</span>
|
||||
<div class="bus-data" v-if="activeBus === 'data'">{{ dataValue }}</div>
|
||||
</div>
|
||||
<div class="bus-line ctrl-bus" :class="{ active: activeBus === 'control' }">
|
||||
<span class="bus-name">控制总线</span>
|
||||
<span class="bus-width">控制信号</span>
|
||||
<div class="bus-data" v-if="activeBus === 'control'">{{ ctrlSignal }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="memory-box">
|
||||
<div class="component-label">主存</div>
|
||||
<div class="mem-cells">
|
||||
<div v-for="i in 8" :key="i" class="mem-cell" :class="{ active: activeMem === i-1 }">
|
||||
{{ fmtAddr(i-1) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="operation-group">
|
||||
<button class="btn" @click="simulateRead">读取内存</button>
|
||||
<button class="btn" @click="simulateWrite">写入内存</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input v-model.number="addressInput" type="number" placeholder="地址(0-7)" min="0" max="7" class="addr-input" />
|
||||
<input v-model.number="dataInput" type="number" placeholder="数据" class="data-input" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="operation-log">
|
||||
<div class="log-title">操作流程</div>
|
||||
<div class="log-steps">
|
||||
<div v-for="(step, i) in logSteps" :key="i" :class="['log-step', step.active ? 'active' : '']">
|
||||
<span class="step-num">{{ i + 1 }}</span>
|
||||
<span class="step-text">{{ step.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bus-explanation">
|
||||
<div class="exp-title">总线知识点</div>
|
||||
<div class="exp-grid">
|
||||
<div class="exp-item">
|
||||
<div class="exp-label">地址总线</div>
|
||||
<div class="exp-desc">CPU 发送内存地址，单向传输</div>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<div class="exp-label">数据总线</div>
|
||||
<div class="exp-desc">传输实际数据，双向传输</div>
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<div class="exp-label">控制总线</div>
|
||||
<div class="exp-desc">传输读/写等控制信号</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeBus = ref('')
|
||||
const activeMem = ref(-1)
|
||||
const addressValue = ref('')
|
||||
const dataValue = ref('')
|
||||
const ctrlSignal = ref('')
|
||||
|
||||
const addressInput = ref(0)
|
||||
const dataInput = ref(100)
|
||||
|
||||
const logSteps = ref([])
|
||||
|
||||
const simulateRead = async () => {
|
||||
logSteps.value = []
|
||||
addressValue.value = addressInput.value.toString(2).padStart(32, '0').slice(-8)
|
||||
|
||||
activeBus.value = 'address'
|
||||
logSteps.value.push({ text: `CPU 通过地址总线发送地址 ${addressInput.value}`, active: true })
|
||||
await wait(1000)
|
||||
|
||||
activeBus.value = 'control'
|
||||
ctrlSignal.value = 'READ'
|
||||
logSteps.value.push({ text: '控制总线发送 READ 信号', active: true })
|
||||
await wait(1000)
|
||||
|
||||
activeBus.value = 'data'
|
||||
activeMem.value = addressInput.value
|
||||
dataValue.value = Math.floor(Math.random() * 256)
|
||||
logSteps.value.push({ text: `主存通过数据总线返回数据 ${dataValue.value}`, active: true })
|
||||
await wait(1000)
|
||||
|
||||
logSteps.value.push({ text: 'CPU 接收数据到寄存器', active: true })
|
||||
}
|
||||
|
||||
const simulateWrite = async () => {
|
||||
logSteps.value = []
|
||||
addressValue.value = addressInput.value.toString(2).padStart(32, '0').slice(-8)
|
||||
dataValue.value = dataInput.value.toString(2).padStart(64, '0').slice(-8)
|
||||
|
||||
activeBus.value = 'address'
|
||||
logSteps.value.push({ text: `CPU 通过地址总线发送地址 ${addressInput.value}`, active: true })
|
||||
await wait(1000)
|
||||
|
||||
activeBus.value = 'data'
|
||||
logSteps.value.push({ text: `CPU 通过数据总线发送数据 ${dataInput.value}`, active: true })
|
||||
await wait(1000)
|
||||
|
||||
activeBus.value = 'control'
|
||||
ctrlSignal.value = 'WRITE'
|
||||
logSteps.value.push({ text: '控制总线发送 WRITE 信号', active: true })
|
||||
await wait(1000)
|
||||
|
||||
activeMem.value = addressInput.value
|
||||
logSteps.value.push({ text: `数据写入主存地址 ${addressInput.value}`, active: true })
|
||||
}
|
||||
|
||||
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms))
|
||||
|
||||
const fmtAddr = (addr) => '0x' + addr.toString(16).toUpperCase()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bus-demo {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.bus-architecture {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cpu-box, .memory-box {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.component-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.cpu-internal {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cu, .alu {
|
||||
padding: 8px 12px;
|
||||
background: #e0f2fe;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.bus-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bus-line {
|
||||
background: #f1f5f9;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.bus-line.active {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.address-bus.active { background: #fef3c7; border-left: 3px solid #f59e0b; }
|
||||
.data-bus.active { background: #dbeafe; border-left: 3px solid #3b82f6; }
|
||||
.ctrl-bus.active { background: #fce7f3; border-left: 3px solid #ec4899; }
|
||||
|
||||
.bus-name {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.bus-width {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.bus-data {
|
||||
margin-left: auto;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.memory-box {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.mem-cells {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mem-cell {
|
||||
padding: 4px;
|
||||
background: #f8fafc;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mem-cell.active {
|
||||
background: #dbeafe;
|
||||
border: 1px solid #3b82f6;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.operation-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.addr-input, .data-input {
|
||||
width: 80px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.operation-log {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.log-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.log-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.log-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
background: #f8fafc;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.log-step.active {
|
||||
background: #dbeafe;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bus-explanation {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.exp-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.exp-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.exp-item {
|
||||
padding: 8px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.exp-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.exp-desc {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="cisc-risc-demo">
|
||||
<h4>⚔️ 两种设计哲学：CISC vs RISC</h4>
|
||||
<p class="desc">点击对比维度，看两种指令集架构的核心差异</p>
|
||||
|
||||
<div class="arch-toggle">
|
||||
<button
|
||||
:class="['toggle-btn', { active: view === 'cisc' }]"
|
||||
@click="view = 'cisc'"
|
||||
>
|
||||
CISC (x86)
|
||||
</button>
|
||||
<button
|
||||
:class="['toggle-btn', { active: view === 'both' }]"
|
||||
@click="view = 'both'"
|
||||
>
|
||||
对比
|
||||
</button>
|
||||
<button
|
||||
:class="['toggle-btn', { active: view === 'risc' }]"
|
||||
@click="view = 'risc'"
|
||||
>
|
||||
RISC (ARM)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="view === 'both'" class="comparison-grid">
|
||||
<div v-for="dim in dimensions" :key="dim.label" class="dim-row">
|
||||
<div class="dim-cisc">{{ dim.cisc }}</div>
|
||||
<div class="dim-label">{{ dim.label }}</div>
|
||||
<div class="dim-risc">{{ dim.risc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="arch-detail">
|
||||
<div class="detail-card">
|
||||
<div class="card-header" :class="view">
|
||||
<span class="card-title">{{ archData[view].name }}</span>
|
||||
<span class="card-full">{{ archData[view].full }}</span>
|
||||
</div>
|
||||
<div class="card-philosophy">
|
||||
<span class="phi-label">设计哲学：</span>
|
||||
<span>{{ archData[view].philosophy }}</span>
|
||||
</div>
|
||||
<div class="card-analogy">
|
||||
<span class="ana-label">类比：</span>
|
||||
<span>{{ archData[view].analogy }}</span>
|
||||
</div>
|
||||
<div class="card-example">
|
||||
<div class="example-title">{{ archData[view].exampleTitle }}</div>
|
||||
<pre class="example-code">{{ archData[view].example }}</pre>
|
||||
<div class="example-note">{{ archData[view].exampleNote }}</div>
|
||||
</div>
|
||||
<div class="card-products">
|
||||
<span class="prod-label">代表产品：</span>
|
||||
<span v-for="p in archData[view].products" :key="p" class="prod-tag">{{ p }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="real-world">
|
||||
<div class="rw-title">🌍 现实中的选择</div>
|
||||
<div class="rw-items">
|
||||
<div class="rw-item">
|
||||
<span class="rw-device">💻 你的电脑</span>
|
||||
<span class="rw-arch">x86 (CISC)</span>
|
||||
<span class="rw-why">兼容几十年的软件生态</span>
|
||||
</div>
|
||||
<div class="rw-item">
|
||||
<span class="rw-device">📱 你的手机</span>
|
||||
<span class="rw-arch">ARM (RISC)</span>
|
||||
<span class="rw-why">低功耗，电池续航更久</span>
|
||||
</div>
|
||||
<div class="rw-item">
|
||||
<span class="rw-device">🍎 Apple Silicon</span>
|
||||
<span class="rw-arch">ARM (RISC)</span>
|
||||
<span class="rw-why">高性能低功耗，颠覆了笔记本市场</span>
|
||||
</div>
|
||||
<div class="rw-item">
|
||||
<span class="rw-device">🔬 RISC-V 开发板</span>
|
||||
<span class="rw-arch">RISC-V (RISC)</span>
|
||||
<span class="rw-why">开源免费，IoT 和教育领域崛起</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const view = ref('both')
|
||||
|
||||
const dimensions = [
|
||||
{ label: '指令数量', cisc: '上千条复杂指令', risc: '几十到几百条精简指令' },
|
||||
{ label: '单条指令', cisc: '一条能做很多事', risc: '一条只做一件事' },
|
||||
{ label: '指令长度', cisc: '变长（1-15字节）', risc: '定长（通常4字节）' },
|
||||
{ label: '执行速度', cisc: '复杂指令多周期', risc: '大多数单周期完成' },
|
||||
{ label: '功耗', cisc: '较高', risc: '较低' },
|
||||
{ label: '流水线', cisc: '难优化（指令长度不一）', risc: '易优化（指令整齐）' },
|
||||
{ label: '编译器负担', cisc: '轻（硬件做更多）', risc: '重（软件做更多优化）' }
|
||||
]
|
||||
|
||||
const archData = {
|
||||
cisc: {
|
||||
name: 'CISC',
|
||||
full: 'Complex Instruction Set Computer',
|
||||
philosophy: '让硬件尽可能强大，一条指令完成复杂操作，减轻编译器负担',
|
||||
analogy: '像一把瑞士军刀——功能多，但每个功能不一定最好用',
|
||||
exampleTitle: '用一条指令完成「内存加法」',
|
||||
example: 'ADD [0x1000], R1\n; 一条指令完成：读内存 → 加法 → 写回内存\n; CPU 内部拆成多个微操作执行',
|
||||
exampleNote: 'CISC 允许指令直接操作内存，一条指令背后可能是 5-6 个微操作',
|
||||
products: ['Intel Core', 'AMD Ryzen', 'x86 服务器']
|
||||
},
|
||||
risc: {
|
||||
name: 'RISC',
|
||||
full: 'Reduced Instruction Set Computer',
|
||||
philosophy: '让每条指令尽可能简单快速，复杂操作由多条简单指令组合完成',
|
||||
analogy: '像一套专业工具——每个工具只做一件事，但做得又快又好',
|
||||
exampleTitle: '用三条指令完成同样的「内存加法」',
|
||||
example: 'LOAD R2, [0x1000] ; 第1步：从内存读数据到寄存器\nADD R2, R2, R1 ; 第2步：寄存器之间做加法\nSTORE R2, [0x1000] ; 第3步：把结果写回内存',
|
||||
exampleNote: 'RISC 要求数据先加载到寄存器，运算只在寄存器间进行，结果再存回内存',
|
||||
products: ['Apple M 系列', '高通骁龙', 'AWS Graviton', 'RISC-V']
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cisc-risc-demo {
|
||||
padding: 20px; border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
|
||||
.arch-toggle { display: flex; gap: 4px; margin-bottom: 16px; background: var(--vp-c-bg); border-radius: 8px; padding: 4px; }
|
||||
.toggle-btn {
|
||||
flex: 1; padding: 8px; border: none; border-radius: 6px;
|
||||
background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s;
|
||||
}
|
||||
.toggle-btn.active { background: var(--vp-c-brand-1); color: #fff; }
|
||||
|
||||
.comparison-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
|
||||
.dim-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
|
||||
.dim-cisc, .dim-risc {
|
||||
padding: 8px 12px; border-radius: 6px; font-size: 12px;
|
||||
background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
.dim-cisc { text-align: right; }
|
||||
.dim-label {
|
||||
padding: 4px 10px; background: var(--vp-c-brand-1); color: #fff;
|
||||
border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap;
|
||||
}
|
||||
|
||||
.arch-detail { margin-bottom: 16px; }
|
||||
.detail-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg); overflow: hidden; }
|
||||
.card-header { padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
|
||||
.card-header.cisc { background: #dbeafe; }
|
||||
.card-header.risc { background: #dcfce7; }
|
||||
.card-title { font-size: 16px; font-weight: 700; }
|
||||
.card-full { font-size: 12px; color: var(--vp-c-text-3); }
|
||||
.card-philosophy, .card-analogy { padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--vp-c-divider); }
|
||||
.phi-label, .ana-label { font-weight: 600; font-size: 12px; color: var(--vp-c-text-3); margin-right: 6px; }
|
||||
.card-example { padding: 12px 14px; border-bottom: 1px solid var(--vp-c-divider); }
|
||||
.example-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
|
||||
.example-code { padding: 8px 10px; margin: 0; font-size: 12px; line-height: 1.5; background: var(--vp-c-bg-soft); border-radius: 4px; white-space: pre-wrap; }
|
||||
.example-note { font-size: 11px; color: var(--vp-c-text-3); margin-top: 6px; }
|
||||
.card-products { padding: 10px 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||||
.prod-label { font-size: 12px; color: var(--vp-c-text-3); font-weight: 600; }
|
||||
.prod-tag { font-size: 11px; padding: 2px 8px; background: var(--vp-c-brand-soft); color: var(--vp-c-brand-1); border-radius: 4px; }
|
||||
|
||||
.real-world { padding: 12px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; }
|
||||
.rw-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
|
||||
.rw-items { display: flex; flex-direction: column; gap: 6px; }
|
||||
.rw-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px; background: var(--vp-c-bg); border-radius: 6px; }
|
||||
.rw-device { font-weight: 600; min-width: 110px; }
|
||||
.rw-arch { padding: 2px 8px; background: var(--vp-c-brand-soft); border-radius: 4px; font-weight: 500; white-space: nowrap; }
|
||||
.rw-why { color: var(--vp-c-text-2); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.dim-row { grid-template-columns: 1fr; gap: 4px; }
|
||||
.dim-cisc { text-align: left; }
|
||||
.dim-label { justify-self: start; }
|
||||
.rw-item { flex-wrap: wrap; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,544 @@
|
||||
<template>
|
||||
<div class="cache-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">缓存 (Cache) 原理</span>
|
||||
<span class="subtitle">CPU 与内存之间的"桥梁"</span>
|
||||
</div>
|
||||
|
||||
<div class="cache-visualization">
|
||||
<div class="cache-levels">
|
||||
<div class="level cpu-level">
|
||||
<div class="level-label">CPU 核心</div>
|
||||
<div class="level-icon">⚡</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-right">→</div>
|
||||
|
||||
<div class="level l1-cache" :class="{ active: activeLevel === 'L1' }">
|
||||
<div class="level-label">L1 缓存</div>
|
||||
<div class="level-info">
|
||||
<span class="size">64 KB</span>
|
||||
<span class="speed">~1ns</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-right">→</div>
|
||||
|
||||
<div class="level l2-cache" :class="{ active: activeLevel === 'L2' }">
|
||||
<div class="level-label">L2 缓存</div>
|
||||
<div class="level-info">
|
||||
<span class="size">256 KB</span>
|
||||
<span class="speed">~5ns</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-right">→</div>
|
||||
|
||||
<div class="level l3-cache" :class="{ active: activeLevel === 'L3' }">
|
||||
<div class="level-label">L3 缓存</div>
|
||||
<div class="level-info">
|
||||
<span class="size">8 MB</span>
|
||||
<span class="speed">~15ns</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-right">→</div>
|
||||
|
||||
<div class="level memory" :class="{ active: activeLevel === 'MEM' }">
|
||||
<div class="level-label">主存</div>
|
||||
<div class="level-info">
|
||||
<span class="size">16 GB</span>
|
||||
<span class="speed">~100ns</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cache-operation">
|
||||
<div class="control-panel">
|
||||
<div class="panel-title">缓存操作演示</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn" @click="simulateRead(100)">读取地址 100</button>
|
||||
<button class="btn" @click="simulateRead(104)">读取地址 104</button>
|
||||
<button class="btn" @click="simulateRead(200)">读取地址 200</button>
|
||||
<button class="btn" @click="simulateRead(108)">读取地址 108</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="operation-log">
|
||||
<div class="log-title">操作记录</div>
|
||||
<div class="log-content">
|
||||
<div v-for="(log, i) in logs" :key="i" :class="['log-item', log.type]">
|
||||
<span class="log-time">T+{{ log.time }}ns</span>
|
||||
<span class="log-text">{{ log.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="locality-explanation">
|
||||
<div class="exp-title">为什么缓存有效？—— 局部性原理</div>
|
||||
<div class="locality-grid">
|
||||
<div class="locality-card">
|
||||
<div class="locality-icon">⏱️</div>
|
||||
<div class="locality-name">时间局部性</div>
|
||||
<div class="locality-desc">刚访问的数据很可能再次被访问</div>
|
||||
<div class="locality-example">循环中的变量</div>
|
||||
</div>
|
||||
<div class="locality-card">
|
||||
<div class="locality-icon">📦</div>
|
||||
<div class="locality-name">空间局部性</div>
|
||||
<div class="locality-desc">访问某个数据后，附近的数据也可能被访问</div>
|
||||
<div class="locality-example">数组遍历、顺序执行</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cache-mapping">
|
||||
<div class="mapping-title">缓存映射方式</div>
|
||||
<div class="mapping-tabs">
|
||||
<button
|
||||
v-for="map in mappings"
|
||||
:key="map.type"
|
||||
:class="['map-btn', { active: selectedMapping === map.type }]"
|
||||
@click="selectedMapping = map.type"
|
||||
>
|
||||
{{ map.type }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mapping-details" v-if="selectedMappingData">
|
||||
<div class="mapping-desc">{{ selectedMappingData.desc }}</div>
|
||||
<div class="mapping-compare">
|
||||
<div class="compare-item">
|
||||
<span class="compare-label">速度</span>
|
||||
<span class="compare-value fast">{{ selectedMappingData.speed }}</span>
|
||||
</div>
|
||||
<div class="compare-item">
|
||||
<span class="compare-label">命中率</span>
|
||||
<span class="compare-value">{{ selectedMappingData.hitRate }}</span>
|
||||
</div>
|
||||
<div class="compare-item">
|
||||
<span class="compare-label">实现复杂度</span>
|
||||
<span class="compare-value">{{ selectedMappingData.complexity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hit-rate-calc">
|
||||
<div class="calc-title">命中率计算</div>
|
||||
<div class="calc-formula">
|
||||
<span class="formula">平均访问时间 = H × T<sub>c</sub> + (1-H) × T<sub>m</sub></span>
|
||||
</div>
|
||||
<div class="calc-example">
|
||||
<div class="calc-row">
|
||||
<label>缓存访问时间 (Tc):</label>
|
||||
<input type="range" v-model="tc" min="1" max="10" />
|
||||
<span>{{ tc }} ns</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<label>内存访问时间 (Tm):</label>
|
||||
<input type="range" v-model="tm" min="50" max="200" />
|
||||
<span>{{ tm }} ns</span>
|
||||
</div>
|
||||
<div class="calc-row">
|
||||
<label>命中率 (H):</label>
|
||||
<input type="range" v-model="hitRate" min="0" max="100" />
|
||||
<span>{{ hitRate }}%</span>
|
||||
</div>
|
||||
<div class="calc-result">
|
||||
平均访问时间 = {{ avgTime }} ns
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const activeLevel = ref('')
|
||||
const logs = ref([])
|
||||
const tc = ref(2)
|
||||
const tm = ref(100)
|
||||
const hitRate = ref(90)
|
||||
const selectedMapping = ref('直接映射')
|
||||
|
||||
const mappings = ref([
|
||||
{
|
||||
type: '直接映射',
|
||||
desc: '每个主存块只能映射到唯一的缓存行',
|
||||
speed: '最快',
|
||||
hitRate: '较低',
|
||||
complexity: '最低'
|
||||
},
|
||||
{
|
||||
type: '组相联',
|
||||
desc: '每个主存块可以映射到 N 个缓存行（N路组相联）',
|
||||
speed: '较快',
|
||||
hitRate: '较高',
|
||||
complexity: '中等'
|
||||
},
|
||||
{
|
||||
type: '全相联',
|
||||
desc: '主存块可以放到任意缓存行中',
|
||||
speed: '最慢',
|
||||
hitRate: '最高',
|
||||
complexity: '最高'
|
||||
}
|
||||
])
|
||||
|
||||
const selectedMappingData = computed(() => {
|
||||
return mappings.value.find(m => m.type === selectedMapping.value)
|
||||
})
|
||||
|
||||
const avgTime = computed(() => {
|
||||
const h = hitRate.value / 100
|
||||
return Math.round(h * tc.value + (1 - h) * tm.value)
|
||||
})
|
||||
|
||||
const simulateRead = async (addr) => {
|
||||
logs.value = []
|
||||
|
||||
if (addr >= 100 && addr < 110) {
|
||||
logs.value.push({ time: 0, text: `读取地址 ${addr}`, type: 'read' })
|
||||
activeLevel.value = 'L1'
|
||||
logs.value.push({ time: tc.value, text: '✓ L1 缓存命中!', type: 'hit' })
|
||||
} else if (addr >= 200 && addr < 210) {
|
||||
logs.value.push({ time: 0, text: `读取地址 ${addr}`, type: 'read' })
|
||||
activeLevel.value = 'L1'
|
||||
logs.value.push({ time: tc.value, text: '✗ L1 缓存未命中', type: 'miss' })
|
||||
activeLevel.value = 'L2'
|
||||
logs.value.push({ time: tc.value + 5, text: '✗ L2 缓存未命中', type: 'miss' })
|
||||
activeLevel.value = 'MEM'
|
||||
logs.value.push({ time: tc.value + 5 + 100, text: '从主存加载数据', type: 'load' })
|
||||
logs.value.push({ time: tc.value + 5 + 100, text: '数据存入缓存', type: 'store' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cache-demo {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.cache-visualization {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cache-levels {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.level {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: #f1f5f9;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.level.active {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.cpu-level {
|
||||
background: #fef3c7;
|
||||
}
|
||||
|
||||
.l1-cache.active { background: #dbeafe; border: 2px solid #3b82f6; }
|
||||
.l2-cache.active { background: #dbeafe; border: 2px solid #2563eb; }
|
||||
.l3-cache.active { background: #dbeafe; border: 2px solid #1d4ed8; }
|
||||
.memory.active { background: #dcfce7; border: 2px solid #16a34a; }
|
||||
|
||||
.level-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.level-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.level-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.size { color: #0369a1; font-weight: 600; }
|
||||
.speed { color: #64748b; }
|
||||
|
||||
.arrow-right {
|
||||
font-size: 18px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.cache-operation {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.control-panel, .operation-log {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.panel-title, .log-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.log-time {
|
||||
color: #64748b;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.log-item.hit .log-text { color: #16a34a; }
|
||||
.log-item.miss .log-text { color: #ea580c; }
|
||||
.log-item.load .log-text { color: #0369a1; }
|
||||
|
||||
.locality-explanation {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.exp-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.locality-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.locality-card {
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.locality-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.locality-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.locality-desc {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.locality-example {
|
||||
font-size: 10px;
|
||||
padding: 4px 8px;
|
||||
background: #e0f2fe;
|
||||
border-radius: 4px;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.cache-mapping {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mapping-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mapping-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.map-btn {
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.map-btn.active {
|
||||
border-color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.mapping-desc {
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mapping-compare {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.compare-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.compare-label {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.compare-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.compare-value.fast { color: #16a34a; }
|
||||
|
||||
.hit-rate-calc {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.calc-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.calc-formula {
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.formula {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.calc-example {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.calc-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.calc-row label {
|
||||
min-width: 120px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.calc-row input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.calc-result {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: #dcfce7;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #166534;
|
||||
}
|
||||
</style>
|
||||
+60
-130
@@ -1,18 +1,15 @@
|
||||
<template>
|
||||
<div class="career-path-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">🚀</span>
|
||||
<span class="title">工程师成长路径</span>
|
||||
<span class="subtitle">从入门到精通的技能演进</span>
|
||||
</div>
|
||||
|
||||
<div class="path-container">
|
||||
<div
|
||||
v-for="(stage, index) in stages"
|
||||
v-for="stage in stages"
|
||||
:key="stage.name"
|
||||
class="stage-card"
|
||||
:class="{ active: activeStage === index }"
|
||||
@click="activeStage = index"
|
||||
>
|
||||
<div class="stage-header">
|
||||
<span class="stage-icon">{{ stage.icon }}</span>
|
||||
@@ -34,31 +31,17 @@
|
||||
<span class="output-text">{{ stage.output }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="index < stages.length - 1" class="stage-arrow">→</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="path-insight">
|
||||
<div class="insight-icon">💡</div>
|
||||
<div class="insight-content">
|
||||
<div class="insight-title">成长关键点</div>
|
||||
<ul class="insight-list">
|
||||
<li>前 1-2 年：打基础，建立"能独立完成任务"的能力</li>
|
||||
<li>2-3 年：选方向，在某个领域建立深度</li>
|
||||
<li>3-5 年：横向扩展，培养架构思维和团队协作能力</li>
|
||||
<li>5 年+：技术决策、团队带领、技术影响力</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<strong>成长关键点：</strong>前 1-2 年打基础，建立独立完成任务的能力；2-3 年选方向，建立深度；3-5 年横向扩展，培养架构思维；5 年+ 技术决策与团队影响力。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeStage = ref(0)
|
||||
|
||||
const stages = ref([
|
||||
const stages = [
|
||||
{
|
||||
name: '入门期',
|
||||
icon: '🌱',
|
||||
@@ -99,188 +82,135 @@ const stages = ref([
|
||||
skills: ['技术战略', '团队建设', '行业洞察', '创新引领'],
|
||||
output: '技术方向决策，培养技术团队'
|
||||
}
|
||||
])
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.career-path-demo {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin: 20px 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 28px;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.path-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stage-card.active {
|
||||
border-color: #3b82f6;
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 24px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.stage-name {
|
||||
font-size: 18px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.stage-time {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
background: #f1f5f9;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.1rem 0.35rem;
|
||||
border-radius: 3px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.stage-content {
|
||||
padding-left: 36px;
|
||||
padding-left: 1.6rem;
|
||||
}
|
||||
|
||||
.stage-desc {
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stage-skills {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.skill-label,
|
||||
.output-label {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-right: 8px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-right: 0.35rem;
|
||||
}
|
||||
|
||||
.skill-tags {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.skill-tag {
|
||||
font-size: 12px;
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.68rem;
|
||||
background: var(--vp-c-brand-soft);
|
||||
color: var(--vp-c-brand-1);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.stage-output {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.output-text {
|
||||
color: #1e293b;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.stage-arrow {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 20px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.path-insight {
|
||||
margin-top: 24px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
|
||||
.insight-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.insight-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.insight-list {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.insight-list li {
|
||||
margin-bottom: 4px;
|
||||
.info-box {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
border-left: 3px solid var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.stage-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.stage-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+284
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="code-optimization-demo">
|
||||
<h4>⚡ 编译器优化：让代码自动变快</h4>
|
||||
<p class="desc">选择一种优化技术，观察编译器如何自动改进你的代码</p>
|
||||
|
||||
<div class="opt-selector">
|
||||
<button
|
||||
v-for="(opt, i) in optimizations"
|
||||
:key="i"
|
||||
:class="['opt-btn', { active: selected === i }]"
|
||||
@click="selected = i"
|
||||
>
|
||||
<span class="opt-icon">{{ opt.icon }}</span>
|
||||
<span>{{ opt.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="opt-detail">
|
||||
<div class="code-panel before">
|
||||
<div class="panel-header">📝 优化前</div>
|
||||
<pre class="code-block">{{ optimizations[selected].before }}</pre>
|
||||
</div>
|
||||
<div class="arrow-col">
|
||||
<div class="arrow-box">
|
||||
<span class="arrow-icon">→</span>
|
||||
<span class="arrow-label">编译器优化</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-panel after">
|
||||
<div class="panel-header">🚀 优化后</div>
|
||||
<pre class="code-block">{{ optimizations[selected].after }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opt-explain">
|
||||
<div class="explain-header">{{ optimizations[selected].name }}原理</div>
|
||||
<div class="explain-text">{{ optimizations[selected].explain }}</div>
|
||||
<div class="perf-gain">
|
||||
<span class="gain-label">性能提升：</span>
|
||||
<div class="gain-bar-bg">
|
||||
<div
|
||||
class="gain-bar"
|
||||
:style="{ width: optimizations[selected].gain + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
<span class="gain-value">{{ optimizations[selected].gain }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selected = ref(0)
|
||||
|
||||
const optimizations = [
|
||||
{
|
||||
icon: '🧮',
|
||||
name: '常量折叠',
|
||||
before: `const width = 10
|
||||
const height = 20
|
||||
const area = width * height // 运行时计算
|
||||
console.log(area)`,
|
||||
after: `const area = 200 // 编译时直接算出结果
|
||||
console.log(200)`,
|
||||
explain:
|
||||
'编译器发现 width 和 height 都是常量，在编译阶段就直接计算出 10 * 20 = 200，运行时不再需要做乘法运算。这是最基础也最常见的优化。',
|
||||
gain: 30
|
||||
},
|
||||
{
|
||||
icon: '💀',
|
||||
name: '死代码消除',
|
||||
before: `function process(x) {
|
||||
const result = x * 2
|
||||
return result
|
||||
|
||||
// 以下代码永远不会执行
|
||||
console.log("debug info")
|
||||
const unused = x + 1
|
||||
return unused
|
||||
}`,
|
||||
after: `function process(x) {
|
||||
return x * 2 // 只保留有用的代码
|
||||
}`,
|
||||
explain:
|
||||
'编译器分析控制流，发现 return 之后的代码永远不会执行，直接删除。同时发现 result 变量只被赋值后立即返回，于是内联了表达式。',
|
||||
gain: 20
|
||||
},
|
||||
{
|
||||
icon: '🔄',
|
||||
name: '循环不变量外提',
|
||||
before: `const arr = [1, 2, 3, ..., 10000]
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
// arr.length 每次循环都要读取
|
||||
process(arr[i])
|
||||
}`,
|
||||
after: `const arr = [1, 2, 3, ..., 10000]
|
||||
const len = arr.length // 提到循环外，只读一次
|
||||
for (let i = 0; i < len; i++) {
|
||||
process(arr[i])
|
||||
}`,
|
||||
explain:
|
||||
'循环体内的 arr.length 每次迭代都要访问，但它的值在循环中不会改变。编译器把这个不变的计算提到循环外面，避免了 10000 次重复读取。',
|
||||
gain: 45
|
||||
},
|
||||
{
|
||||
icon: '📦',
|
||||
name: '函数内联',
|
||||
before: `function square(x) {
|
||||
return x * x
|
||||
}
|
||||
|
||||
// 调用 10000 次
|
||||
for (let i = 0; i < 10000; i++) {
|
||||
result += square(i) // 每次都有函数调用开销
|
||||
}`,
|
||||
after: `// 消除函数调用开销
|
||||
for (let i = 0; i < 10000; i++) {
|
||||
result += i * i // 直接展开，无调用开销
|
||||
}`,
|
||||
explain:
|
||||
'函数调用有开销（保存寄存器、跳转、返回）。对于小函数，编译器直接把函数体"粘贴"到调用处，消除调用开销。JIT 编译器（如 V8）特别擅长这个优化。',
|
||||
gain: 55
|
||||
},
|
||||
{
|
||||
icon: '🔗',
|
||||
name: '常量传播',
|
||||
before: `const x = 10
|
||||
const y = x + 5 // y = 15
|
||||
const z = y * 2 // z = 30
|
||||
console.log(z + 1) // 31`,
|
||||
after: `console.log(31) // 编译时追踪所有常量值
|
||||
// x, y, z 全部被消除`,
|
||||
explain:
|
||||
'编译器追踪每个变量的值：x=10 → y=15 → z=30 → z+1=31。当所有中间变量都是常量时，整个计算链在编译时就完成了，运行时只需要输出结果。',
|
||||
gain: 40
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.code-optimization-demo {
|
||||
padding: 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.desc {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 14px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.opt-selector {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.opt-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.opt-btn.active {
|
||||
background: var(--vp-c-brand-1);
|
||||
color: #fff;
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
.opt-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
.opt-detail {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.code-panel {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
.panel-header {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
.code-block {
|
||||
padding: 10px 12px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.arrow-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.arrow-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.arrow-icon {
|
||||
font-size: 24px;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 700;
|
||||
}
|
||||
.arrow-label {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.opt-explain {
|
||||
padding: 12px 14px;
|
||||
background: var(--vp-c-brand-soft);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.explain-header {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.explain-text {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.perf-gain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.gain-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.gain-bar-bg {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gain-bar {
|
||||
height: 100%;
|
||||
background: var(--vp-c-brand-1);
|
||||
border-radius: 4px;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
.gain-value {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.opt-detail {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.arrow-col {
|
||||
transform: rotate(90deg);
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+184
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="code-to-instruction-demo">
|
||||
<h4>🔗 从代码到指令：一行代码的翻译之旅</h4>
|
||||
<p class="desc">点击每个阶段，看你写的代码如何一步步变成 CPU 能执行的指令</p>
|
||||
|
||||
<div class="example-selector">
|
||||
<button
|
||||
v-for="(ex, i) in examples"
|
||||
:key="i"
|
||||
:class="['ex-btn', { active: selectedExample === i }]"
|
||||
@click="selectedExample = i"
|
||||
>
|
||||
<code>{{ ex.code }}</code>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="translation-chain">
|
||||
<div
|
||||
v-for="(stage, j) in examples[selectedExample].stages"
|
||||
:key="j"
|
||||
:class="['stage-card', { active: activeStage === j }]"
|
||||
@click="activeStage = j"
|
||||
>
|
||||
<div class="stage-header">
|
||||
<span class="stage-num">{{ j + 1 }}</span>
|
||||
<span class="stage-name">{{ stage.name }}</span>
|
||||
</div>
|
||||
<pre class="stage-code">{{ stage.content }}</pre>
|
||||
<div v-if="activeStage === j" class="stage-explain">
|
||||
{{ stage.explain }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="j in examples[selectedExample].stages.length - 1"
|
||||
:key="'arrow-' + j"
|
||||
class="chain-arrow"
|
||||
:style="{ order: j * 2 }"
|
||||
>
|
||||
↓
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-insight">
|
||||
<div class="insight-title">💡 关键理解</div>
|
||||
<div class="insight-text">
|
||||
指令集就是 CPU 的「API」——它定义了 CPU 能听懂的所有命令。
|
||||
编译器的工作就是把你写的高级语言「翻译」成这套 API 的调用序列。
|
||||
不同的 CPU（x86、ARM）有不同的指令集，就像不同的服务有不同的 API。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selectedExample = ref(0)
|
||||
const activeStage = ref(0)
|
||||
|
||||
const examples = [
|
||||
{
|
||||
code: 'int a = 10 + 5;',
|
||||
stages: [
|
||||
{
|
||||
name: '你写的代码',
|
||||
content: 'int a = 10 + 5;',
|
||||
explain:
|
||||
'这是你在编辑器里写的高级语言代码。对人类来说很好懂，但 CPU 完全看不懂——它不认识 int、也不知道 + 是什么。'
|
||||
},
|
||||
{
|
||||
name: '编译器翻译成汇编',
|
||||
content: 'MOV R1, #10 ; 把 10 放入寄存器 R1\nMOV R2, #5 ; 把 5 放入寄存器 R2\nADD R3, R1, R2 ; R3 = R1 + R2\nSTORE R3, [a] ; 把结果存到变量 a 的内存地址',
|
||||
explain:
|
||||
'编译器把一行高级代码拆成了 4 条汇编指令。每条指令只做一件最简单的事：搬数据、做加法、存结果。这就是 CPU 的「能力粒度」。'
|
||||
},
|
||||
{
|
||||
name: '汇编器转成机器码',
|
||||
content: '0001 0001 0000 1010 → MOV R1, #10\n0001 0010 0000 0101 → MOV R2, #5\n0010 0011 0001 0010 → ADD R3, R1, R2\n0100 0011 1000 0000 → STORE R3, [a]',
|
||||
explain:
|
||||
'汇编器把每条汇编指令编码成二进制数字。操作码（前几位）告诉 CPU「做什么」，操作数（后面的位）告诉 CPU「对谁做」。这就是 CPU 真正执行的东西。'
|
||||
},
|
||||
{
|
||||
name: 'CPU 逐条执行',
|
||||
content: '时钟 1: 取指 → 译码 → 执行 MOV R1, #10\n时钟 2: 取指 → 译码 → 执行 MOV R2, #5\n时钟 3: 取指 → 译码 → 执行 ADD R3, R1, R2\n时钟 4: 取指 → 译码 → 执行 STORE R3, [a]',
|
||||
explain:
|
||||
'CPU 按顺序从内存取出每条指令，译码后执行。每个时钟周期处理一条指令（简化模型）。4 条指令执行完，变量 a 的值就是 15 了。'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'if (x > 0) y = 1;',
|
||||
stages: [
|
||||
{
|
||||
name: '你写的代码',
|
||||
content: 'if (x > 0) y = 1;',
|
||||
explain:
|
||||
'一个简单的条件判断。人类一眼就懂，但 CPU 没有「if」的概念——它只会比较和跳转。'
|
||||
},
|
||||
{
|
||||
name: '编译器翻译成汇编',
|
||||
content: 'LOAD R1, [x] ; 从内存读取 x 的值\nCMP R1, #0 ; 比较 R1 和 0\nBLE skip ; 如果 ≤ 0，跳过下面\nMOV R2, #1 ; R2 = 1\nSTORE R2, [y] ; 把 1 存到 y\nskip: ; 跳转目标',
|
||||
explain:
|
||||
'编译器把 if 语句拆成了「比较 + 条件跳转」。CMP 指令比较两个值并设置标志位，BLE 根据标志位决定是否跳过赋值代码。这就是 CPU 实现条件逻辑的方式。'
|
||||
},
|
||||
{
|
||||
name: '汇编器转成机器码',
|
||||
content: '0011 0001 1000 0000 → LOAD R1, [x]\n0101 0001 0000 0000 → CMP R1, #0\n0110 0000 0000 0011 → BLE +3（跳过3条）\n0001 0010 0000 0001 → MOV R2, #1\n0100 0010 1000 0001 → STORE R2, [y]',
|
||||
explain:
|
||||
'注意 BLE 指令的操作数是「+3」——这是一个相对地址偏移，告诉 CPU 向前跳 3 条指令。这就是「相对寻址」的实际应用。'
|
||||
},
|
||||
{
|
||||
name: 'CPU 逐条执行',
|
||||
content: '假设 x = 5（大于 0）:\n→ LOAD: 读取 x=5 到 R1\n→ CMP: 比较 5 > 0，设置标志位\n→ BLE: 条件不满足，不跳转\n→ MOV: R2 = 1\n→ STORE: y = 1 ✅',
|
||||
explain:
|
||||
'因为 x=5 大于 0，BLE 的条件不满足，所以 CPU 继续执行下面的赋值。如果 x=0，BLE 会跳过赋值，直接到 skip 标签处。'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.code-to-instruction-demo {
|
||||
padding: 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
|
||||
.example-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.ex-btn {
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
|
||||
}
|
||||
.ex-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
|
||||
.ex-btn code { font-size: 13px; }
|
||||
|
||||
.translation-chain {
|
||||
display: flex; flex-direction: column; gap: 0; margin-bottom: 16px;
|
||||
}
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider); border-radius: 8px;
|
||||
background: var(--vp-c-bg); overflow: hidden; cursor: pointer;
|
||||
transition: all 0.2s; order: 0;
|
||||
}
|
||||
.stage-card:nth-child(1) { order: 0; }
|
||||
.stage-card:nth-child(3) { order: 2; }
|
||||
.stage-card:nth-child(5) { order: 4; }
|
||||
.stage-card:nth-child(7) { order: 6; }
|
||||
.stage-card.active { border-color: var(--vp-c-brand-1); box-shadow: 0 0 0 1px var(--vp-c-brand-1); }
|
||||
.stage-header {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 12px; background: var(--vp-c-bg-soft);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
.stage-num {
|
||||
width: 22px; height: 22px; border-radius: 50%; background: var(--vp-c-brand-1);
|
||||
color: #fff; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 600;
|
||||
}
|
||||
.stage-name { font-size: 13px; font-weight: 600; }
|
||||
.stage-code {
|
||||
padding: 10px 12px; margin: 0; font-size: 12px; line-height: 1.5;
|
||||
white-space: pre-wrap; max-height: 120px; overflow-y: auto;
|
||||
}
|
||||
.stage-explain {
|
||||
padding: 8px 12px; font-size: 12px; line-height: 1.6;
|
||||
background: var(--vp-c-brand-soft); border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
.chain-arrow {
|
||||
text-align: center; font-size: 18px; color: var(--vp-c-brand-1);
|
||||
font-weight: 700; padding: 4px 0;
|
||||
}
|
||||
|
||||
.key-insight {
|
||||
padding: 12px 14px; background: var(--vp-c-brand-soft); border-radius: 8px;
|
||||
}
|
||||
.insight-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
|
||||
.insight-text { font-size: 13px; line-height: 1.6; }
|
||||
</style>
|
||||
+157
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="compile-vs-interpret-demo">
|
||||
<h4>🔄 编译型 vs 解释型 vs JIT</h4>
|
||||
<p class="desc">点击不同执行模式，观察代码从源码到运行的过程</p>
|
||||
|
||||
<div class="mode-selector">
|
||||
<button
|
||||
v-for="(m, i) in modes"
|
||||
:key="i"
|
||||
:class="['mode-btn', { active: selected === i }]"
|
||||
@click="selectMode(i)"
|
||||
>
|
||||
{{ m.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="pipeline">
|
||||
<div
|
||||
v-for="(step, j) in modes[selected].steps"
|
||||
:key="j"
|
||||
:class="['pipe-step', { visible: visibleSteps > j }]"
|
||||
>
|
||||
<div class="step-icon">{{ step.icon }}</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
</div>
|
||||
<div v-if="j < modes[selected].steps.length - 1" class="arrow">→</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics">
|
||||
<div class="metric" v-for="m in modes[selected].metrics" :key="m.label">
|
||||
<span class="metric-label">{{ m.label }}</span>
|
||||
<div class="metric-bar-bg">
|
||||
<div class="metric-bar" :style="{ width: m.value + '%', background: m.color }"></div>
|
||||
</div>
|
||||
<span class="metric-val">{{ m.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="examples">
|
||||
<span class="ex-label">代表语言：</span>
|
||||
<span class="ex-lang" v-for="l in modes[selected].langs" :key="l">{{ l }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selected = ref(0)
|
||||
const visibleSteps = ref(0)
|
||||
let timer = null
|
||||
|
||||
function selectMode(i) {
|
||||
selected.value = i
|
||||
visibleSteps.value = 0
|
||||
clearInterval(timer)
|
||||
timer = setInterval(() => {
|
||||
if (visibleSteps.value < modes[i].steps.length) {
|
||||
visibleSteps.value++
|
||||
} else {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const modes = [
|
||||
{
|
||||
name: '编译型',
|
||||
steps: [
|
||||
{ icon: '📝', name: '源代码', desc: 'main.c' },
|
||||
{ icon: '⚙️', name: '编译器', desc: '全量编译' },
|
||||
{ icon: '📦', name: '机器码', desc: '二进制可执行文件' },
|
||||
{ icon: '🚀', name: '直接执行', desc: 'CPU 直接运行' }
|
||||
],
|
||||
metrics: [
|
||||
{ label: '运行速度', value: 95, text: '极快', color: '#22c55e' },
|
||||
{ label: '启动速度', value: 30, text: '慢（需编译）', color: '#ef4444' },
|
||||
{ label: '跨平台', value: 20, text: '需重新编译', color: '#ef4444' }
|
||||
],
|
||||
langs: ['C', 'C++', 'Rust', 'Go']
|
||||
},
|
||||
{
|
||||
name: '解释型',
|
||||
steps: [
|
||||
{ icon: '📝', name: '源代码', desc: 'app.py' },
|
||||
{ icon: '🔍', name: '解释器', desc: '逐行读取' },
|
||||
{ icon: '🔄', name: '逐行执行', desc: '边翻译边运行' }
|
||||
],
|
||||
metrics: [
|
||||
{ label: '运行速度', value: 30, text: '较慢', color: '#ef4444' },
|
||||
{ label: '启动速度', value: 90, text: '快（直接运行）', color: '#22c55e' },
|
||||
{ label: '跨平台', value: 90, text: '天然跨平台', color: '#22c55e' }
|
||||
],
|
||||
langs: ['Python', 'Ruby', 'PHP', 'Bash']
|
||||
},
|
||||
{
|
||||
name: 'JIT 即时编译',
|
||||
steps: [
|
||||
{ icon: '📝', name: '源代码', desc: 'app.js' },
|
||||
{ icon: '🔍', name: '解释执行', desc: '先解释运行' },
|
||||
{ icon: '🔥', name: '热点检测', desc: '发现高频代码' },
|
||||
{ icon: '⚡', name: 'JIT 编译', desc: '编译为机器码' },
|
||||
{ icon: '🚀', name: '高速执行', desc: '接近原生速度' }
|
||||
],
|
||||
metrics: [
|
||||
{ label: '运行速度', value: 75, text: '快（热点接近原生）', color: '#22c55e' },
|
||||
{ label: '启动速度', value: 60, text: '中等（需预热）', color: '#eab308' },
|
||||
{ label: '跨平台', value: 85, text: '跨平台', color: '#22c55e' }
|
||||
],
|
||||
langs: ['JavaScript (V8)', 'Java (JVM)', 'C# (.NET)']
|
||||
}
|
||||
]
|
||||
|
||||
selectMode(0)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.compile-vs-interpret-demo {
|
||||
padding: 20px; border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
.mode-selector { display: flex; gap: 8px; margin-bottom: 16px; }
|
||||
.mode-btn {
|
||||
padding: 8px 18px; border-radius: 8px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); cursor: pointer; font-size: 14px; font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.mode-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
|
||||
.pipeline { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
|
||||
.pipe-step {
|
||||
display: flex; align-items: center; gap: 4px; opacity: 0;
|
||||
transform: translateY(8px); transition: all 0.3s;
|
||||
}
|
||||
.pipe-step.visible { opacity: 1; transform: translateY(0); }
|
||||
.step-icon { font-size: 24px; }
|
||||
.step-name { font-size: 12px; font-weight: 600; }
|
||||
.step-desc { font-size: 11px; color: var(--vp-c-text-3); }
|
||||
.arrow { color: var(--vp-c-text-3); font-size: 18px; margin: 0 4px; }
|
||||
.metrics { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
|
||||
.metric { display: flex; align-items: center; gap: 8px; font-size: 13px; }
|
||||
.metric-label { width: 70px; text-align: right; color: var(--vp-c-text-2); }
|
||||
.metric-bar-bg { flex: 1; height: 10px; background: var(--vp-c-divider); border-radius: 5px; overflow: hidden; }
|
||||
.metric-bar { height: 100%; border-radius: 5px; transition: width 0.5s; }
|
||||
.metric-val { width: 130px; font-size: 12px; color: var(--vp-c-text-3); }
|
||||
.examples { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.ex-label { font-size: 13px; color: var(--vp-c-text-2); }
|
||||
.ex-lang {
|
||||
padding: 3px 10px; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px; font-size: 12px;
|
||||
}
|
||||
@media (max-width: 640px) { .metric-val { width: auto; } }
|
||||
</style>
|
||||
+2
-19
@@ -10,8 +10,6 @@
|
||||
v-for="field in fields"
|
||||
:key="field.name"
|
||||
class="field-card"
|
||||
:class="{ active: activeField === field.name }"
|
||||
@click="activeField = field.name"
|
||||
>
|
||||
<div class="field-name">{{ field.name }}</div>
|
||||
<div class="field-desc">{{ field.desc }}</div>
|
||||
@@ -28,11 +26,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeField = ref('前端')
|
||||
|
||||
const fields = ref([
|
||||
const fields = [
|
||||
{
|
||||
name: '前端',
|
||||
desc: '用户能看到、能交互的一切',
|
||||
@@ -63,7 +57,7 @@ const fields = ref([
|
||||
desc: '数据采集、存储、分析',
|
||||
techs: ['SQL', 'Spark', '数据仓库']
|
||||
}
|
||||
])
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -106,17 +100,6 @@ const fields = ref([
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.field-card:hover {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.field-card.active {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.field-name {
|
||||
|
||||
@@ -0,0 +1,436 @@
|
||||
<template>
|
||||
<div class="controller-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">控制器工作原理</span>
|
||||
<span class="subtitle">控制信号如何协调 CPU 各个部件</span>
|
||||
</div>
|
||||
|
||||
<div class="control-unit">
|
||||
<div class="cu-box">
|
||||
<div class="cu-title">控制单元 CU</div>
|
||||
<div class="cu-diagram">
|
||||
<div class="cu-internal">
|
||||
<div class="cu-component">指令寄存器 IR</div>
|
||||
<div class="cu-component">指令译码器</div>
|
||||
<div class="cu-component">时序发生器</div>
|
||||
</div>
|
||||
<div class="cu-output">
|
||||
<div class="output-label">输出控制信号：</div>
|
||||
<div class="control-signals">
|
||||
<div v-for="sig in controlSignals" :key="sig.name" :class="['sig-box', sig.active ? 'active' : '']">
|
||||
{{ sig.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cpu-block-diagram">
|
||||
<div class="block-row">
|
||||
<div class="cpu-block" :class="{ active: activeBlock === 'pc' }">
|
||||
<div class="block-name">PC</div>
|
||||
<div class="block-desc">程序计数器</div>
|
||||
</div>
|
||||
<div class="arrow" :class="{ active: activeBlock === 'pc' }">→</div>
|
||||
<div class="cpu-block" :class="{ active: activeBlock === 'mar' }">
|
||||
<div class="block-name">MAR</div>
|
||||
<div class="block-desc">地址寄存器</div>
|
||||
</div>
|
||||
<div class="arrow" :class="{ active: activeBlock === 'mar' }">→</div>
|
||||
<div class="cpu-block" :class="{ active: activeBlock === 'memory' }">
|
||||
<div class="block-name">Memory</div>
|
||||
<div class="block-desc">主存</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-row">
|
||||
<div class="cpu-block" :class="{ active: activeBlock === 'mdr' }">
|
||||
<div class="block-name">MDR</div>
|
||||
<div class="block-desc">数据寄存器</div>
|
||||
</div>
|
||||
<div class="arrow" :class="{ active: activeBlock === 'mdr' }">→</div>
|
||||
<div class="cpu-block" :class="{ active: activeBlock === 'ir' }">
|
||||
<div class="block-name">IR</div>
|
||||
<div class="block-desc">指令寄存器</div>
|
||||
</div>
|
||||
<div class="arrow" :class="{ active: activeBlock === 'ir' }">→</div>
|
||||
<div class="cpu-block" :class="{ active: activeBlock === 'decoder' }">
|
||||
<div class="block-name">ID</div>
|
||||
<div class="block-desc">译码器</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-row">
|
||||
<div class="cpu-block" :class="{ active: activeBlock === 'alu' }">
|
||||
<div class="block-name">ALU</div>
|
||||
<div class="block-desc">算术逻辑单元</div>
|
||||
</div>
|
||||
<div class="arrow" :class="{ active: activeBlock === 'alu' }">↔</div>
|
||||
<div class="cpu-block" :class="{ active: activeBlock === 'acc' }">
|
||||
<div class="block-name">ACC</div>
|
||||
<div class="block-desc">累加器</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<button class="btn" @click="executeFetch">执行取指周期</button>
|
||||
<button class="btn" @click="executeAdd">执行 ADD 指令</button>
|
||||
<button class="btn" @click="executeLoad">执行 LOAD 指令</button>
|
||||
</div>
|
||||
|
||||
<div class="microinstruction-panel">
|
||||
<div class="panel-title">当前微指令</div>
|
||||
<div class="micro-ops">
|
||||
<div v-for="(op, i) in microOps" :key="i" :class="['micro-op', op.active ? 'active' : '']">
|
||||
<span class="op-cycle">T{{ i + 1 }}</span>
|
||||
<span class="op-desc">{{ op.desc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cu-explanation">
|
||||
<div class="exp-title">控制器核心概念</div>
|
||||
<div class="exp-content">
|
||||
<div class="exp-item">
|
||||
<strong>控制信号：</strong>由控制器发出的电信号，用于控制数据通路中各个部件的动作
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<strong>时序：</strong>CPU 操作按时钟节拍进行，每个节拍执行特定微操作
|
||||
</div>
|
||||
<div class="exp-item">
|
||||
<strong>硬布线 vs 微程序：</strong>硬布线控制器速度快但设计复杂；微程序控制器灵活但速度稍慢
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
const activeBlock = ref('')
|
||||
|
||||
const controlSignals = reactive([
|
||||
{ name: 'PC→MAR', active: false },
|
||||
{ name: 'MEM→MDR', active: false },
|
||||
{ name: 'MDR→IR', active: false },
|
||||
{ name: 'IR→ID', active: false },
|
||||
{ name: 'ALU→ACC', active: false },
|
||||
{ name: 'ACC→MDR', active: false },
|
||||
])
|
||||
|
||||
const microOps = reactive([])
|
||||
|
||||
const clearSignals = () => {
|
||||
controlSignals.forEach(s => s.active = false)
|
||||
activeBlock.value = ''
|
||||
}
|
||||
|
||||
const executeFetch = async () => {
|
||||
clearSignals()
|
||||
microOps.splice(0, microOps.length)
|
||||
|
||||
microOps.push({ desc: 'PC→MAR: 将PC中的地址送入MAR', active: true })
|
||||
controlSignals[0].active = true
|
||||
activeBlock.value = 'pc'
|
||||
await wait(1000)
|
||||
|
||||
microOps.push({ desc: 'MEM→MDR: 从内存读取指令到MDR', active: true })
|
||||
controlSignals[1].active = true
|
||||
activeBlock.value = 'memory'
|
||||
await wait(1000)
|
||||
|
||||
microOps.push({ desc: 'MDR→IR: 将指令送入IR', active: true })
|
||||
controlSignals[2].active = true
|
||||
activeBlock.value = 'mar'
|
||||
await wait(1000)
|
||||
|
||||
microOps.push({ desc: 'IR→ID: 指令送入译码器', active: true })
|
||||
controlSignals[3].active = true
|
||||
activeBlock.value = 'ir'
|
||||
await wait(1000)
|
||||
}
|
||||
|
||||
const executeAdd = async () => {
|
||||
clearSignals()
|
||||
microOps.splice(0, microOps.length)
|
||||
|
||||
microOps.push({ desc: '指令译码：识别为ADD指令', active: true })
|
||||
activeBlock.value = 'decoder'
|
||||
await wait(1000)
|
||||
|
||||
microOps.push({ desc: 'ALU执行加法运算', active: true })
|
||||
controlSignals[4].active = true
|
||||
activeBlock.value = 'alu'
|
||||
await wait(1000)
|
||||
|
||||
microOps.push({ desc: '结果写入ACC', active: true })
|
||||
activeBlock.value = 'acc'
|
||||
await wait(1000)
|
||||
}
|
||||
|
||||
const executeLoad = async () => {
|
||||
clearSignals()
|
||||
microOps.splice(0, microOps.length)
|
||||
|
||||
microOps.push({ desc: '指令译码：识别为LOAD指令', active: true })
|
||||
activeBlock.value = 'decoder'
|
||||
await wait(1000)
|
||||
|
||||
microOps.push({ desc: 'PC→MAR: 取操作数地址', active: true })
|
||||
controlSignals[0].active = true
|
||||
activeBlock.value = 'pc'
|
||||
await wait(1000)
|
||||
|
||||
microOps.push({ desc: 'MEM→MDR: 读取数据', active: true })
|
||||
controlSignals[1].active = true
|
||||
activeBlock.value = 'memory'
|
||||
await wait(1000)
|
||||
|
||||
microOps.push({ desc: 'MDR→ACC: 数据送入ACC', active: true })
|
||||
controlSignals[5].active = true
|
||||
activeBlock.value = 'mdr'
|
||||
await wait(1000)
|
||||
}
|
||||
|
||||
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.controller-demo {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.control-unit {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cu-box {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.cu-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cu-diagram {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cu-internal {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cu-component {
|
||||
padding: 8px 12px;
|
||||
background: #e0f2fe;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: #0369a1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cu-output {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.output-label {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.control-signals {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sig-box {
|
||||
padding: 6px 10px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.sig-box.active {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cpu-block-diagram {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.block-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cpu-block {
|
||||
padding: 10px 16px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.cpu-block.active {
|
||||
background: #dbeafe;
|
||||
border: 2px solid #3b82f6;
|
||||
}
|
||||
|
||||
.block-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.block-desc {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 16px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.arrow.active {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.microinstruction-panel {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.micro-ops {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.micro-op {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
background: #f8fafc;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.micro-op.active {
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.op-cycle {
|
||||
font-weight: 600;
|
||||
color: #3b82f6;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.op-desc {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.cu-explanation {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.exp-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.exp-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.exp-item {
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
padding: 8px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,53 +1,85 @@
|
||||
<template>
|
||||
<div class="desktop-demo">
|
||||
<div class="demo-label">桌面是如何出现的 ── 点击加载</div>
|
||||
|
||||
<div class="desktop-view" @click="loading = !loading">
|
||||
<div class="screen" :class="{ loaded: loading }">
|
||||
<div class="boot-screen" v-if="!loading">
|
||||
<div class="boot-logo">⚙️</div>
|
||||
<div class="boot-text">正在启动...</div>
|
||||
<div class="demo-title">从开机到桌面</div>
|
||||
<div class="screen-wrapper">
|
||||
<div class="screen">
|
||||
<div v-if="phase === 0" class="phase-bios">
|
||||
<div class="bios-text">POST 自检中...</div>
|
||||
</div>
|
||||
<div class="desktop" v-else>
|
||||
<div v-else-if="phase === 1" class="phase-boot">
|
||||
<div class="boot-spinner"></div>
|
||||
<div class="boot-text">正在加载内核...</div>
|
||||
</div>
|
||||
<div v-else-if="phase === 2" class="phase-loading">
|
||||
<div class="loading-bar-track">
|
||||
<div class="loading-bar-fill"></div>
|
||||
</div>
|
||||
<div class="loading-text">启动系统服务...</div>
|
||||
</div>
|
||||
<div v-else class="phase-desktop">
|
||||
<div class="desktop-icons">
|
||||
<div class="desktop-icon">📁</div>
|
||||
<div class="desktop-icon">🗑️</div>
|
||||
<div class="desktop-icon">⚙️</div>
|
||||
<div class="desktop-icon">🌐</div>
|
||||
<div class="icon-item" v-for="icon in icons" :key="icon.label">
|
||||
<div class="icon-box">{{ icon.emoji }}</div>
|
||||
<div class="icon-label">{{ icon.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="taskbar">
|
||||
<div class="taskbar-icon">🏠</div>
|
||||
<div class="taskbar-icon">📊</div>
|
||||
<div class="taskbar-time">{{ time }}</div>
|
||||
<span class="taskbar-start">☰</span>
|
||||
<span class="taskbar-spacer"></span>
|
||||
<span class="taskbar-clock">{{ clock }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tap-hint">👆 点击切换开机状态</div>
|
||||
<div class="phase-labels">
|
||||
<span v-for="(label, i) in labels" :key="label" class="phase-label" :class="{ active: phase >= i }">
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const time = ref('')
|
||||
|
||||
const phase = ref(0)
|
||||
const clock = ref('')
|
||||
let timer = null
|
||||
let phaseTimer = null
|
||||
|
||||
const updateTime = () => {
|
||||
const icons = [
|
||||
{ emoji: '📁', label: '文件' },
|
||||
{ emoji: '🌐', label: '浏览器' },
|
||||
{ emoji: '⚙️', label: '设置' },
|
||||
{ emoji: '🗑️', label: '回收站' }
|
||||
]
|
||||
const labels = ['BIOS 自检', '内核加载', '服务启动', '桌面就绪']
|
||||
|
||||
const updateClock = () => {
|
||||
const now = new Date()
|
||||
time.value = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||||
clock.value = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
|
||||
const runSequence = () => {
|
||||
phase.value = 0
|
||||
const delays = [1500, 1500, 1800]
|
||||
let i = 0
|
||||
const next = () => {
|
||||
if (i < delays.length) {
|
||||
phaseTimer = setTimeout(() => { phase.value = i + 1; i++; next() }, delays[i])
|
||||
}
|
||||
}
|
||||
next()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateTime()
|
||||
timer = setInterval(updateTime, 1000)
|
||||
updateClock()
|
||||
timer = setInterval(updateClock, 30000)
|
||||
runSequence()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) clearInterval(timer)
|
||||
if (phaseTimer) clearTimeout(phaseTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -58,115 +90,163 @@ onUnmounted(() => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
.demo-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.desktop-view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.screen-wrapper { display: flex; justify-content: center; }
|
||||
.screen {
|
||||
width: 14rem;
|
||||
height: 9rem;
|
||||
background: #1a1a1a;
|
||||
width: 16rem;
|
||||
height: 10rem;
|
||||
background: #111;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.screen.loaded {
|
||||
background: linear-gradient(180deg, #2d5af5 0%, #1e3a8a 100%);
|
||||
/* BIOS phase */
|
||||
.phase-bios {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.boot-screen {
|
||||
.bios-text {
|
||||
font-size: 0.7rem;
|
||||
color: #0f0;
|
||||
font-family: monospace;
|
||||
animation: blink 1s steps(1) infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
/* Boot phase */
|
||||
.phase-boot {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.boot-logo {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
animation: spin 2s linear infinite;
|
||||
.boot-spinner {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border: 2px solid #333;
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.boot-text {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.65rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
/* Loading phase */
|
||||
.phase-loading {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.loading-bar-track {
|
||||
width: 8rem;
|
||||
height: 4px;
|
||||
background: #333;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.loading-bar-fill {
|
||||
height: 100%;
|
||||
background: #4a9eff;
|
||||
border-radius: 2px;
|
||||
animation: fill 1.6s ease-out forwards;
|
||||
}
|
||||
@keyframes fill {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
.loading-text {
|
||||
font-size: 0.65rem;
|
||||
color: #888;
|
||||
}
|
||||
/* Desktop phase */
|
||||
.phase-desktop {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.desktop-icons {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.desktop-icon {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
.icon-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 2.5rem;
|
||||
}
|
||||
.icon-box {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.icon-label {
|
||||
font-size: 0.5rem;
|
||||
color: rgba(255,255,255,0.8);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.taskbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(0,0,0,0.3);
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.taskbar-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.taskbar-time {
|
||||
margin-left: auto;
|
||||
.taskbar-start {
|
||||
font-size: 0.7rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tap-hint {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
.taskbar-spacer { flex: 1; }
|
||||
.taskbar-clock {
|
||||
font-size: 0.6rem;
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
/* Phase labels */
|
||||
.phase-labels {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.8rem;
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
.phase-label {
|
||||
font-size: 0.62rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.75rem;
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.phase-label.active {
|
||||
opacity: 1;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
</style>
|
||||
|
||||
+3
-3
@@ -37,13 +37,13 @@ const eras = ref([
|
||||
{
|
||||
name: '原生时代',
|
||||
time: '1990s',
|
||||
desc: '直接操作 DOM，一切从零开始',
|
||||
desc: '直接用代码操控页面元素，一切从零开始',
|
||||
techs: ['HTML', 'CSS', 'JavaScript']
|
||||
},
|
||||
{
|
||||
name: 'jQuery 时代',
|
||||
time: '2006-2015',
|
||||
desc: '简化 DOM 操作，跨浏览器兼容',
|
||||
desc: '简化页面操控，跨浏览器兼容',
|
||||
techs: ['jQuery', 'Bootstrap']
|
||||
},
|
||||
{
|
||||
@@ -55,7 +55,7 @@ const eras = ref([
|
||||
{
|
||||
name: '组件化时代',
|
||||
time: '2013-至今',
|
||||
desc: '声明式、组件化、虚拟 DOM',
|
||||
desc: '声明式、组件化，框架自动更新页面',
|
||||
techs: ['React', 'Vue', 'Angular']
|
||||
},
|
||||
{
|
||||
|
||||
+2
-18
@@ -10,8 +10,6 @@
|
||||
v-for="tech in triad"
|
||||
:key="tech.name"
|
||||
class="tech-card"
|
||||
:class="{ active: activeTech === tech.name }"
|
||||
@click="activeTech = tech.name"
|
||||
>
|
||||
<div class="tech-name">{{ tech.name }}</div>
|
||||
<div class="tech-role">{{ tech.role }}</div>
|
||||
@@ -29,11 +27,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeTech = ref('HTML')
|
||||
|
||||
const triad = ref([
|
||||
const triad = [
|
||||
{
|
||||
name: 'HTML',
|
||||
role: '结构层',
|
||||
@@ -52,7 +46,7 @@ const triad = ref([
|
||||
analogy: '房子的智能：开关灯、开门',
|
||||
examples: ['事件', 'DOM操作', '网络请求']
|
||||
}
|
||||
])
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -95,16 +89,6 @@ const triad = ref([
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tech-card:hover {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.tech-card.active {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.tech-name {
|
||||
|
||||
+66
-90
@@ -1,120 +1,96 @@
|
||||
<template>
|
||||
<div class="full-process-demo">
|
||||
<div class="demo-label">完整流程概览 ── 点击逐步演示</div>
|
||||
|
||||
<div class="process-flow">
|
||||
<div
|
||||
v-for="(phase, index) in phases"
|
||||
:key="phase.name"
|
||||
class="phase"
|
||||
:class="{ active: currentPhase >= index }"
|
||||
@click="currentPhase = index"
|
||||
>
|
||||
<div class="phase-icon">{{ phase.icon }}</div>
|
||||
<div class="phase-name">{{ phase.name }}</div>
|
||||
<div class="phase-steps">
|
||||
<span v-for="step in phase.steps" :key="step" class="step-tag">{{ step }}</span>
|
||||
<div class="full-demo">
|
||||
<div class="demo-title">从按下电源到看到网页 ── 完整链路</div>
|
||||
<div class="chain">
|
||||
<div v-for="(phase, i) in phases" :key="phase.name" class="chain-item">
|
||||
<div class="phase-card" :style="{ borderLeftColor: phase.color }">
|
||||
<div class="phase-head">
|
||||
<span class="phase-icon">{{ phase.icon }}</span>
|
||||
<span class="phase-name">{{ phase.name }}</span>
|
||||
</div>
|
||||
<div class="phase-steps">
|
||||
{{ phase.steps }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="i < phases.length - 1" class="chain-arrow">
|
||||
<svg width="20" height="14" viewBox="0 0 20 14">
|
||||
<path d="M0 7h14M10 2l6 5-6 5" fill="none" stroke="var(--vp-c-text-3)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tap-hint">👆 点击查看各阶段</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const currentPhase = ref(0)
|
||||
const phases = [
|
||||
{ icon: '🔌', name: '硬件启动', steps: ['电源', '主板', 'CPU', 'BIOS'] },
|
||||
{ icon: '💻', name: '系统启动', steps: ['引导程序', '内核', '服务', '桌面'] },
|
||||
{ icon: '🌐', name: '浏览器', steps: ['双击图标', '加载程序', '显示窗口'] },
|
||||
{ icon: '📡', name: '网络请求', steps: ['URL解析', 'DNS', 'TCP', 'HTTP'] },
|
||||
{ icon: '🎨', name: '页面渲染', steps: ['HTML解析', 'CSS', '布局', '绘制'] }
|
||||
{ icon: '🔌', name: '硬件启动', color: '#f59e0b', steps: '电源 → 主板 → CPU → BIOS' },
|
||||
{ icon: '🔍', name: '固件自检', color: '#ef4444', steps: 'POST → 初始化 → 找启动盘' },
|
||||
{ icon: '💻', name: '系统启动', color: '#8b5cf6', steps: '引导 → 内核 → 服务 → 桌面' },
|
||||
{ icon: '🌐', name: '浏览器启动', color: '#3b82f6', steps: '创建进程 → 加载代码 → 就绪' },
|
||||
{ icon: '📡', name: '网络请求与渲染', color: '#10b981', steps: 'DNS → TCP → HTTP → 渲染' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.full-process-demo {
|
||||
.full-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.process-flow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.phase {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.6rem 0.4rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
opacity: 0.4;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.phase.active {
|
||||
opacity: 1;
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.phase-icon {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.phase-name {
|
||||
font-size: 0.7rem;
|
||||
.demo-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.4rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.phase-steps {
|
||||
.chain {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.step-tag {
|
||||
font-size: 0.58rem;
|
||||
text-align: center;
|
||||
padding: 0.15rem 0;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 3px;
|
||||
color: var(--vp-c-text-3);
|
||||
.chain-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.phase.active .step-tag {
|
||||
.phase-card {
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-left: 3px solid;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.6rem;
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.tap-hint {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
.phase-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.phase-icon { font-size: 0.9rem; }
|
||||
.phase-name {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.phase-steps {
|
||||
font-size: 0.58rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.chain-arrow {
|
||||
padding: 0 0.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.chain { flex-direction: column; gap: 0.15rem; }
|
||||
.chain-item { flex-direction: column; }
|
||||
.chain-arrow { transform: rotate(90deg); padding: 0.1rem 0; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="generic-type-demo">
|
||||
<h4>🧩 泛型：写一次，适用所有类型</h4>
|
||||
<p class="desc">点击不同场景，看泛型如何让代码既灵活又安全</p>
|
||||
|
||||
<div class="scene-selector">
|
||||
<button
|
||||
v-for="(s, i) in scenes"
|
||||
:key="i"
|
||||
:class="['scene-btn', { active: selected === i }]"
|
||||
@click="selected = i"
|
||||
>
|
||||
{{ s.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="code-comparison">
|
||||
<div class="code-panel">
|
||||
<div class="panel-tag bad">❌ 没有泛型</div>
|
||||
<pre class="code-block">{{ scenes[selected].without }}</pre>
|
||||
<div class="panel-problem">{{ scenes[selected].problem }}</div>
|
||||
</div>
|
||||
<div class="code-panel">
|
||||
<div class="panel-tag good">✅ 使用泛型</div>
|
||||
<pre class="code-block">{{ scenes[selected].withGeneric }}</pre>
|
||||
<div class="panel-benefit">{{ scenes[selected].benefit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="type-flow">
|
||||
<div class="flow-title">类型传递过程</div>
|
||||
<div class="flow-steps">
|
||||
<span
|
||||
v-for="(step, j) in scenes[selected].flow"
|
||||
:key="j"
|
||||
class="flow-step"
|
||||
>
|
||||
<code>{{ step }}</code>
|
||||
<span v-if="j < scenes[selected].flow.length - 1" class="flow-arrow">→</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selected = ref(0)
|
||||
|
||||
const scenes = [
|
||||
{
|
||||
label: '通用函数',
|
||||
without: `// 要为每种类型写一个函数
|
||||
function getFirstNumber(arr: number[]): number {
|
||||
return arr[0]
|
||||
}
|
||||
function getFirstString(arr: string[]): string {
|
||||
return arr[0]
|
||||
}
|
||||
// 还有 boolean、object...写不完`,
|
||||
withGeneric: `// 一个泛型函数搞定所有类型
|
||||
function getFirst<T>(arr: T[]): T {
|
||||
return arr[0]
|
||||
}
|
||||
|
||||
getFirst<number>([1, 2, 3]) // → number
|
||||
getFirst<string>(["a", "b"]) // → string`,
|
||||
problem: '每种类型都要写一遍，代码重复',
|
||||
benefit: 'T 是类型参数，调用时自动替换为实际类型',
|
||||
flow: ['T = number', 'arr: number[]', '返回值: number']
|
||||
},
|
||||
{
|
||||
label: '类型安全容器',
|
||||
without: `// 用 any 失去类型安全
|
||||
class Box {
|
||||
value: any
|
||||
get(): any { return this.value }
|
||||
}
|
||||
const box = new Box()
|
||||
box.value = 42
|
||||
const v = box.get() // v 是 any，没有类型提示`,
|
||||
withGeneric: `// 泛型类保持类型安全
|
||||
class Box<T> {
|
||||
value: T
|
||||
get(): T { return this.value }
|
||||
}
|
||||
const box = new Box<number>()
|
||||
box.value = 42
|
||||
const v = box.get() // v 是 number，有完整提示`,
|
||||
problem: 'any 类型没有任何类型检查和提示',
|
||||
benefit: '泛型类在实例化时确定类型，全程类型安全',
|
||||
flow: ['Box<number>', 'value: number', 'get(): number']
|
||||
},
|
||||
{
|
||||
label: '类型约束',
|
||||
without: `// 没有约束，什么都能传
|
||||
function getLength<T>(item: T): number {
|
||||
return item.length // ❌ 编译错误！
|
||||
// T 可能没有 length 属性
|
||||
}`,
|
||||
withGeneric: `// 用 extends 约束 T 必须有 length
|
||||
interface HasLength { length: number }
|
||||
|
||||
function getLength<T extends HasLength>(item: T) {
|
||||
return item.length // ✅ 安全！
|
||||
}
|
||||
|
||||
getLength("hello") // ✅ string 有 length
|
||||
getLength([1, 2, 3]) // ✅ array 有 length
|
||||
getLength(42) // ❌ number 没有 length`,
|
||||
problem: '不加约束，泛型太"自由"，无法安全访问属性',
|
||||
benefit: 'extends 约束确保 T 一定有 length 属性',
|
||||
flow: ['T extends HasLength', '确保有 .length', '安全访问']
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.generic-type-demo {
|
||||
padding: 20px; border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
.scene-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.scene-btn {
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
|
||||
}
|
||||
.scene-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
|
||||
.code-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
|
||||
.code-panel { border: 1px solid var(--vp-c-divider); border-radius: 8px; overflow: hidden; background: var(--vp-c-bg); }
|
||||
.panel-tag { padding: 6px 12px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--vp-c-divider); }
|
||||
.panel-tag.bad { background: #fef2f2; color: #991b1b; }
|
||||
.panel-tag.good { background: #f0fdf4; color: #166534; }
|
||||
.code-block { padding: 10px 12px; margin: 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
|
||||
.panel-problem, .panel-benefit { padding: 6px 12px; font-size: 12px; border-top: 1px solid var(--vp-c-divider); }
|
||||
.panel-problem { background: #fef2f2; color: #991b1b; }
|
||||
.panel-benefit { background: #f0fdf4; color: #166534; }
|
||||
.type-flow { padding: 12px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; }
|
||||
.flow-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
|
||||
.flow-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
||||
.flow-step { display: flex; align-items: center; gap: 6px; }
|
||||
.flow-step code { padding: 3px 8px; background: var(--vp-c-bg); border-radius: 4px; font-size: 12px; }
|
||||
.flow-arrow { color: var(--vp-c-text-3); font-weight: 600; }
|
||||
@media (max-width: 640px) { .code-comparison { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
@@ -0,0 +1,591 @@
|
||||
<template>
|
||||
<div class="io-method-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">I/O 方式对比</span>
|
||||
<span class="subtitle">程序查询 · 中断方式 · DMA</span>
|
||||
</div>
|
||||
|
||||
<div class="io-tabs">
|
||||
<button
|
||||
v-for="method in ioMethods"
|
||||
:key="method.name"
|
||||
:class="['tab-btn', { active: selectedMethod === method.name }]"
|
||||
@click="selectedMethod = method.name"
|
||||
>
|
||||
{{ method.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="method-details" v-if="selectedMethodData">
|
||||
<div class="detail-header">
|
||||
<span class="method-name">{{ selectedMethodData.name }}</span>
|
||||
<span class="method-english">{{ selectedMethodData.english }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-flow">
|
||||
<div class="flow-title">工作流程</div>
|
||||
<div class="flow-diagram">
|
||||
<div v-for="(step, i) in selectedMethodData.steps" :key="i" class="flow-node">
|
||||
<div class="node-box" :class="{ active: activeStep === i }" @click="activeStep = i">
|
||||
<span class="node-num">{{ i + 1 }}</span>
|
||||
<span class="node-text">{{ step }}</span>
|
||||
</div>
|
||||
<div v-if="i < selectedMethodData.steps.length - 1" class="flow-arrow">↓</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-comparison">
|
||||
<div class="comp-grid">
|
||||
<div class="comp-item">
|
||||
<span class="comp-label">CPU 参与度</span>
|
||||
<span class="comp-value" :class="selectedMethodData.cpuLevel">{{ selectedMethodData.cpuLevel }}</span>
|
||||
</div>
|
||||
<div class="comp-item">
|
||||
<span class="comp-label">速度</span>
|
||||
<span class="comp-value">{{ selectedMethodData.speed }}</span>
|
||||
</div>
|
||||
<div class="comp-item">
|
||||
<span class="comp-label">复杂度</span>
|
||||
<span class="comp-value">{{ selectedMethodData.complexity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison-section">
|
||||
<div class="section-title">三种 I/O 方式对比</div>
|
||||
<table class="compare-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>特性</th>
|
||||
<th>程序查询</th>
|
||||
<th>中断方式</th>
|
||||
<th>DMA</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>CPU 参与度</td>
|
||||
<td>全程参与</td>
|
||||
<td>仅处理中断</td>
|
||||
<td>几乎不参与</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数据传输</td>
|
||||
<td>CPU 逐字节搬运</td>
|
||||
<td>CPU 逐字搬运</td>
|
||||
<td>外设直接到内存</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>优点</td>
|
||||
<td>简单、控制灵活</td>
|
||||
<td>CPU 效率高</td>
|
||||
<td>CPU 完全解放</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>缺点</td>
|
||||
<td>CPU 利用率低</td>
|
||||
<td>中断开销</td>
|
||||
<td>硬件复杂</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>适用场景</td>
|
||||
<td>简单外设、低速设备</td>
|
||||
<td>中低速设备</td>
|
||||
<td>高速批量传输</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="dma-demo" v-if="selectedMethod === 'DMA'">
|
||||
<div class="dma-title">DMA 传输过程</div>
|
||||
<div class="dma-visual">
|
||||
<div class="device cpu-device">
|
||||
<div class="device-icon">💻</div>
|
||||
<div class="device-name">CPU</div>
|
||||
</div>
|
||||
|
||||
<div class="dma-channel">
|
||||
<div class="channel-step" v-if="dmaStep >= 1">
|
||||
<span class="step-label">1. CPU 设置 DMA</span>
|
||||
<span class="step-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device dma-device">
|
||||
<div class="device-icon">🔧</div>
|
||||
<div class="device-name">DMA 控制器</div>
|
||||
</div>
|
||||
|
||||
<div class="dma-channel">
|
||||
<div class="channel-step" v-if="dmaStep >= 2">
|
||||
<span class="step-label">2. DMA 直接访问内存</span>
|
||||
<span class="step-arrow">→</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device memory-device">
|
||||
<div class="device-icon">💾</div>
|
||||
<div class="device-name">内存</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dma-controls">
|
||||
<button class="btn" @click="startDma" :disabled="dmaStep > 0">开始 DMA 传输</button>
|
||||
<button class="btn" @click="resetDma">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="interrupt-demo" v-if="selectedMethod === '中断方式'">
|
||||
<div class="interrupt-title">中断处理流程</div>
|
||||
<div class="interrupt-visual">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item" v-for="(item, i) in interruptFlow" :key="i" :class="{ active: interruptStep === i }">
|
||||
<div class="timeline-num">{{ i + 1 }}</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-title">{{ item.title }}</div>
|
||||
<div class="timeline-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="interrupt-controls">
|
||||
<button class="btn" @click="nextInterrupt" :disabled="interruptStep >= interruptFlow.length - 1">下一步</button>
|
||||
<button class="btn" @click="resetInterrupt">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const selectedMethod = ref('程序查询')
|
||||
const activeStep = ref(0)
|
||||
const dmaStep = ref(0)
|
||||
const interruptStep = ref(0)
|
||||
|
||||
const ioMethods = ref([
|
||||
{
|
||||
name: '程序查询',
|
||||
english: 'Programmed I/O',
|
||||
cpuLevel: '高',
|
||||
speed: '慢',
|
||||
complexity: '低',
|
||||
steps: [
|
||||
'CPU 轮询检查 I/O 设备状态',
|
||||
'设备忙？继续等待',
|
||||
'设备就绪，发送读写命令',
|
||||
'CPU 逐字节读取/写入数据',
|
||||
'判断是否传输完成',
|
||||
'未完成则继续查询'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '中断方式',
|
||||
english: 'Interrupt-Driven I/O',
|
||||
cpuLevel: '中',
|
||||
speed: '中',
|
||||
complexity: '中',
|
||||
steps: [
|
||||
'CPU 启动 I/O 设备',
|
||||
'CPU 继续执行其他任务',
|
||||
'I/O 完成后发送中断请求',
|
||||
'CPU 响应中断，保存现场',
|
||||
'执行中断处理程序',
|
||||
'恢复现场，继续执行'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'DMA',
|
||||
english: 'Direct Memory Access',
|
||||
cpuLevel: '低',
|
||||
speed: '快',
|
||||
complexity: '高',
|
||||
steps: [
|
||||
'CPU 设置 DMA 控制器',
|
||||
'告诉 DMA 源地址、目标地址、传输长度',
|
||||
'CPU 去执行其他任务',
|
||||
'DMA 控制器直接与内存交换数据',
|
||||
'传输完成，DMA 发送中断通知 CPU'
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const selectedMethodData = computed(() => {
|
||||
return ioMethods.value.find(m => m.name === selectedMethod.value)
|
||||
})
|
||||
|
||||
const interruptFlow = ref([
|
||||
{ title: '中断请求', desc: 'I/O 设备向 CPU 发送中断请求信号' },
|
||||
{ title: '中断响应', desc: 'CPU 完成当前指令后响应中断' },
|
||||
{ title: '保存现场', desc: '保存 PC、寄存器等当前状态到栈' },
|
||||
{ title: '中断处理', desc: '执行中断服务程序 ISR' },
|
||||
{ title: '恢复现场', desc: '恢复保存的寄存器值' },
|
||||
{ title: '返回执行', desc: '返回被中断的程序继续执行' }
|
||||
])
|
||||
|
||||
const startDma = () => {
|
||||
dmaStep.value = 1
|
||||
setTimeout(() => {
|
||||
dmaStep.value = 2
|
||||
setTimeout(() => {
|
||||
dmaStep.value = 3
|
||||
}, 1000)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const resetDma = () => {
|
||||
dmaStep.value = 0
|
||||
}
|
||||
|
||||
const nextInterrupt = () => {
|
||||
if (interruptStep.value < interruptFlow.value.length - 1) {
|
||||
interruptStep.value++
|
||||
}
|
||||
}
|
||||
|
||||
const resetInterrupt = () => {
|
||||
interruptStep.value = 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.io-method-demo {
|
||||
background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.io-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
border-color: #ec4899;
|
||||
background: #fdf2f8;
|
||||
}
|
||||
|
||||
.method-details {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.method-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.method-english {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.detail-flow {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.flow-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.flow-diagram {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.flow-node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.node-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
background: #f8fafc;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.node-box.active {
|
||||
border-color: #ec4899;
|
||||
background: #fdf2f8;
|
||||
}
|
||||
|
||||
.node-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.node-text {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
font-size: 18px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.detail-comparison {
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.comp-grid {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.comp-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comp-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.comp-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.comp-value.高 { color: #dc2626; }
|
||||
.comp-value.中 { color: #f59e0b; }
|
||||
.comp-value.低 { color: #16a34a; }
|
||||
|
||||
.comparison-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.compare-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.compare-table th,
|
||||
.compare-table td {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.compare-table th {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.compare-table td {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.dma-demo, .interrupt-demo {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.dma-title, .interrupt-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dma-visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.device {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.device-name {
|
||||
font-size: 12px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.dma-channel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.channel-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
background: #dbeafe;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.step-arrow {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.dma-controls, .interrupt-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
.interrupt-visual {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.timeline-item.active {
|
||||
border-left-color: #ec4899;
|
||||
background: #fdf2f8;
|
||||
}
|
||||
|
||||
.timeline-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.timeline-desc {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
+398
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<div class="instruction-format-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">机器指令格式</span>
|
||||
<span class="subtitle">操作码 + 操作数 = 机器指令</span>
|
||||
</div>
|
||||
|
||||
<div class="format-selector">
|
||||
<button
|
||||
v-for="fmt in instructionFormats"
|
||||
:key="fmt.type"
|
||||
:class="['format-btn', { active: selectedFormat === fmt.type }]"
|
||||
@click="selectedFormat = fmt.type"
|
||||
>
|
||||
{{ fmt.type }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="format-visualization" v-if="selectedFormatData">
|
||||
<div class="format-diagram">
|
||||
<div
|
||||
v-for="(field, i) in selectedFormatData.fields"
|
||||
:key="i"
|
||||
class="field-box"
|
||||
:style="{ flex: field.bits }"
|
||||
>
|
||||
<span class="field-name">{{ field.name }}</span>
|
||||
<span class="field-bits">{{ field.bits }}位</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="format-example">
|
||||
<div class="example-title">示例指令</div>
|
||||
<div class="binary-display">
|
||||
<span
|
||||
v-for="(bit, i) in selectedFormatData.example"
|
||||
:key="i"
|
||||
class="bit"
|
||||
:class="{ highlight: isHighlight(i, selectedFormatData) }"
|
||||
>
|
||||
{{ bit }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="example-desc">{{ selectedFormatData.description }}</div>
|
||||
</div>
|
||||
|
||||
<div class="format-explanation">
|
||||
<div class="exp-title">{{ selectedFormatData.type }} 格式说明</div>
|
||||
<div class="exp-content">{{ selectedFormatData.explanation }}</div>
|
||||
|
||||
<div class="examples-list" v-if="selectedFormatData.examples">
|
||||
<div class="list-title">常见指令示例</div>
|
||||
<div v-for="ex in selectedFormatData.examples" :key="ex.name" class="example-item">
|
||||
<span class="ex-name">{{ ex.name }}</span>
|
||||
<span class="ex-desc">{{ ex.desc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opcode-table">
|
||||
<div class="table-title">常用操作码 (Opcode)</div>
|
||||
<div class="opcode-grid">
|
||||
<div v-for="op in opcodes" :key="op.code" class="opcode-item">
|
||||
<span class="op-code">{{ op.code }}</span>
|
||||
<span class="op-name">{{ op.name }}</span>
|
||||
<span class="op-desc">{{ op.desc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const selectedFormat = ref('three-address')
|
||||
|
||||
const instructionFormats = ref([
|
||||
{
|
||||
type: '零地址',
|
||||
fields: [{ name: '操作码', bits: 8 }],
|
||||
example: '01101100',
|
||||
description: '操作数隐含在栈顶',
|
||||
explanation: '零地址指令只有操作码，操作数隐含在操作数栈中。常用于堆栈计算机，如 ENTER、EXIT 等。',
|
||||
examples: [
|
||||
{ name: 'POP', desc: '弹出栈顶数据' },
|
||||
{ name: 'PUSH', desc: '压入数据到栈顶' },
|
||||
{ name: 'CALL', desc: '调用子程序' }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: '一地址',
|
||||
fields: [
|
||||
{ name: '操作码', bits: 8 },
|
||||
{ name: '地址', bits: 24 }
|
||||
],
|
||||
example: '01101100 00000001 00000010 00000011',
|
||||
description: '一个操作数地址，另一个隐含',
|
||||
explanation: '一地址指令有一个操作数在内存/寄存器中，另一个操作数隐含在 ACC（累加器）中。如 INC、DEC 等单操作数指令。',
|
||||
examples: [
|
||||
{ name: 'INC A', desc: 'A = A + 1' },
|
||||
{ name: 'DEC A', desc: 'A = A - 1' },
|
||||
{ name: 'NOT A', desc: 'A = ~A' }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: '二地址',
|
||||
fields: [
|
||||
{ name: '操作码', bits: 8 },
|
||||
{ name: '目的地址', bits: 8 },
|
||||
{ name: '源地址', bits: 8 }
|
||||
],
|
||||
example: '01101100 00000001 00000010',
|
||||
description: '两个操作数地址，结果存目的地址',
|
||||
explanation: '最常用的指令格式。两个操作数地址，结果覆盖目的操作数。如 ADD、SUB、MOV 等。',
|
||||
examples: [
|
||||
{ name: 'MOV R1, R2', desc: 'R1 = R2' },
|
||||
{ name: 'ADD R1, R2', desc: 'R1 = R1 + R2' },
|
||||
{ name: 'SUB R1, R2', desc: 'R1 = R1 - R2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: '三地址',
|
||||
fields: [
|
||||
{ name: '操作码', bits: 8 },
|
||||
{ name: '目的', bits: 8 },
|
||||
{ name: '源1', bits: 8 },
|
||||
{ name: '源2', bits: 8 }
|
||||
],
|
||||
example: '01101100 00000001 00000010 00000011',
|
||||
description: '结果存新地址，不破坏源操作数',
|
||||
explanation: '三个地址分别指定目的操作数和两个源操作数。结果存入目的地址，不改变源操作数。常见于复杂指令集。',
|
||||
examples: [
|
||||
{ name: 'ADD R1, R2, R3', desc: 'R1 = R2 + R3' },
|
||||
{ name: 'SUB R1, R2, R3', desc: 'R1 = R2 - R3' },
|
||||
{ name: 'MUL R1, R2, R3', desc: 'R1 = R2 × R3' }
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const selectedFormatData = computed(() => {
|
||||
return instructionFormats.value.find(f => f.type === selectedFormat.value)
|
||||
})
|
||||
|
||||
const isHighlight = (index, formatData) => {
|
||||
const opcodeBits = 8
|
||||
return index < opcodeBits
|
||||
}
|
||||
|
||||
const opcodes = ref([
|
||||
{ code: '00000000', name: 'NOP', desc: '无操作' },
|
||||
{ code: '00000001', name: 'MOV', desc: '数据传送' },
|
||||
{ code: '00000010', name: 'ADD', desc: '加法' },
|
||||
{ code: '00000011', name: 'SUB', desc: '减法' },
|
||||
{ code: '00000100', name: 'MUL', desc: '乘法' },
|
||||
{ code: '00000101', name: 'DIV', desc: '除法' },
|
||||
{ code: '00000110', name: 'AND', desc: '逻辑与' },
|
||||
{ code: '00000111', name: 'OR', desc: '逻辑或' },
|
||||
{ code: '00001000', name: 'NOT', desc: '逻辑非' },
|
||||
{ code: '00001001', name: 'XOR', desc: '异或' },
|
||||
{ code: '00001010', name: 'SHL', desc: '左移' },
|
||||
{ code: '00001011', name: 'SHR', desc: '右移' },
|
||||
{ code: '00001100', name: 'JMP', desc: '无条件跳转' },
|
||||
{ code: '00001101', name: 'JE', desc: '相等跳转' },
|
||||
{ code: '00001110', name: 'JNE', desc: '不等跳转' },
|
||||
{ code: '00001111', name: 'CALL', desc: '调用子程序' },
|
||||
{ code: '00010000', name: 'RET', desc: '返回' },
|
||||
{ code: '00010001', name: 'PUSH', desc: '压栈' },
|
||||
{ code: '00010010', name: 'POP', desc: '出栈' },
|
||||
{ code: '00010011', name: 'LOAD', desc: '从内存加载' },
|
||||
{ code: '00010100', name: 'STORE', desc: '存入内存' }
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.instruction-format-demo {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.format-selector {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.format-btn {
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.format-btn.active {
|
||||
border-color: #22c55e;
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.format-visualization {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.format-diagram {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.field-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 8px;
|
||||
background: #e0f2fe;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.field-box:first-child {
|
||||
background: #fef3c7;
|
||||
}
|
||||
|
||||
.field-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.field-bits {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.format-example {
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.example-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.binary-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.bit {
|
||||
padding: 4px 6px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 2px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.bit.highlight {
|
||||
background: #fef3c7;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.example-desc {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.format-explanation {
|
||||
padding: 12px;
|
||||
background: #f0f9ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.exp-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.exp-content {
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.examples-list {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.example-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.ex-name {
|
||||
font-family: monospace;
|
||||
color: #0369a1;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.ex-desc {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.opcode-table {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.opcode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.opcode-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
background: #f8fafc;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.op-code {
|
||||
font-family: monospace;
|
||||
padding: 2px 6px;
|
||||
background: #e0f2fe;
|
||||
border-radius: 2px;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.op-name {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.op-desc {
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="lexer-token-demo">
|
||||
<h4>🔤 词法分析器：把代码拆成 Token</h4>
|
||||
<p class="desc">输入一行代码，实时看到词法分析的结果</p>
|
||||
|
||||
<div class="input-area">
|
||||
<input
|
||||
v-model="code"
|
||||
class="code-input"
|
||||
placeholder="试试输入: let x = 10 + 5;"
|
||||
@input="tokenize"
|
||||
/>
|
||||
<div class="presets">
|
||||
<button v-for="p in presets" :key="p" class="preset-btn" @click="code = p; tokenize()">
|
||||
{{ p }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="tokens.length" class="token-stream">
|
||||
<div class="stream-label">Token 流：</div>
|
||||
<div class="tokens">
|
||||
<span
|
||||
v-for="(t, i) in tokens"
|
||||
:key="i"
|
||||
:class="['token', 'token-' + t.type]"
|
||||
@mouseenter="hovered = i"
|
||||
@mouseleave="hovered = null"
|
||||
>
|
||||
{{ t.value }}
|
||||
<span v-if="hovered === i" class="token-tip">{{ t.label }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="tokens.length" class="token-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Token</th><th>类型</th><th>说明</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(t, i) in tokens" :key="i">
|
||||
<td><code>{{ t.value }}</code></td>
|
||||
<td><span :class="['type-badge', 'token-' + t.type]">{{ t.label }}</span></td>
|
||||
<td class="explain">{{ t.explain }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const code = ref('let x = 10 + 5;')
|
||||
const tokens = ref([])
|
||||
const hovered = ref(null)
|
||||
|
||||
const presets = [
|
||||
'let x = 10 + 5;',
|
||||
'if (a > b) { return a; }',
|
||||
'function add(a, b) { return a + b; }'
|
||||
]
|
||||
|
||||
const keywords = new Set(['let', 'const', 'var', 'if', 'else', 'for', 'while', 'function', 'return', 'class', 'import', 'export', 'true', 'false', 'null', 'undefined'])
|
||||
|
||||
function tokenize() {
|
||||
const result = []
|
||||
let s = code.value.trim()
|
||||
let i = 0
|
||||
while (i < s.length) {
|
||||
if (/\s/.test(s[i])) { i++; continue }
|
||||
if (/[0-9]/.test(s[i])) {
|
||||
let num = ''
|
||||
while (i < s.length && /[0-9.]/.test(s[i])) num += s[i++]
|
||||
result.push({ value: num, type: 'number', label: '数字', explain: '数值字面量' })
|
||||
} else if (/[a-zA-Z_$]/.test(s[i])) {
|
||||
let id = ''
|
||||
while (i < s.length && /[a-zA-Z0-9_$]/.test(s[i])) id += s[i++]
|
||||
if (keywords.has(id)) {
|
||||
result.push({ value: id, type: 'keyword', label: '关键字', explain: '语言保留字' })
|
||||
} else {
|
||||
result.push({ value: id, type: 'identifier', label: '标识符', explain: '变量/函数名' })
|
||||
}
|
||||
} else if (s[i] === '"' || s[i] === "'") {
|
||||
const q = s[i]; let str = q; i++
|
||||
while (i < s.length && s[i] !== q) str += s[i++]
|
||||
if (i < s.length) str += s[i++]
|
||||
result.push({ value: str, type: 'string', label: '字符串', explain: '字符串字面量' })
|
||||
} else if ('+-*/%'.includes(s[i])) {
|
||||
result.push({ value: s[i], type: 'operator', label: '运算符', explain: '算术运算' })
|
||||
i++
|
||||
} else if ('=<>!'.includes(s[i])) {
|
||||
let op = s[i]; i++
|
||||
if (i < s.length && s[i] === '=') { op += s[i]; i++ }
|
||||
if (i < s.length && s[i] === '=') { op += s[i]; i++ }
|
||||
result.push({ value: op, type: 'operator', label: '运算符', explain: '比较/赋值运算' })
|
||||
} else if ('(){}[]'.includes(s[i])) {
|
||||
result.push({ value: s[i], type: 'bracket', label: '括号', explain: '分组/作用域' })
|
||||
i++
|
||||
} else if (';,'.includes(s[i])) {
|
||||
result.push({ value: s[i], type: 'punctuation', label: '分隔符', explain: '语句/参数分隔' })
|
||||
i++
|
||||
} else {
|
||||
result.push({ value: s[i], type: 'unknown', label: '未知', explain: '无法识别' })
|
||||
i++
|
||||
}
|
||||
}
|
||||
tokens.value = result
|
||||
}
|
||||
|
||||
onMounted(tokenize)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lexer-token-demo {
|
||||
padding: 20px; border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
.code-input {
|
||||
width: 100%; padding: 10px 12px; border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 14px;
|
||||
background: var(--vp-c-bg); color: var(--vp-c-text-1); box-sizing: border-box;
|
||||
}
|
||||
.presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
|
||||
.preset-btn {
|
||||
padding: 4px 10px; border-radius: 4px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); font-size: 11px; cursor: pointer;
|
||||
font-family: 'Fira Code', monospace; color: var(--vp-c-text-2);
|
||||
}
|
||||
.preset-btn:hover { border-color: var(--vp-c-brand-1); }
|
||||
.token-stream { margin-top: 16px; }
|
||||
.stream-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
|
||||
.tokens { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.token {
|
||||
position: relative; padding: 4px 8px; border-radius: 4px;
|
||||
font-family: 'Fira Code', monospace; font-size: 13px; cursor: default;
|
||||
}
|
||||
.token-tip {
|
||||
position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
|
||||
padding: 2px 6px; background: #333; color: #fff; border-radius: 4px;
|
||||
font-size: 11px; white-space: nowrap; font-family: sans-serif;
|
||||
}
|
||||
.token-keyword { background: #dbeafe; color: #1e40af; }
|
||||
.token-identifier { background: #f0fdf4; color: #166534; }
|
||||
.token-number { background: #fef3c7; color: #92400e; }
|
||||
.token-string { background: #fce7f3; color: #9d174d; }
|
||||
.token-operator { background: #ede9fe; color: #5b21b6; }
|
||||
.token-bracket { background: #e0e7ff; color: #3730a3; }
|
||||
.token-punctuation { background: #f1f5f9; color: #475569; }
|
||||
.token-unknown { background: #fef2f2; color: #991b1b; }
|
||||
.token-table { margin-top: 16px; overflow-x: auto; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
th { text-align: left; padding: 6px 10px; background: var(--vp-c-bg); border-bottom: 2px solid var(--vp-c-divider); }
|
||||
td { padding: 5px 10px; border-bottom: 1px solid var(--vp-c-divider); }
|
||||
.type-badge { padding: 2px 6px; border-radius: 4px; font-size: 11px; }
|
||||
.explain { color: var(--vp-c-text-3); }
|
||||
</style>
|
||||
@@ -0,0 +1,483 @@
|
||||
<template>
|
||||
<div class="psw-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">程序状态字 (PSW)</span>
|
||||
<span class="subtitle">CPU 的"状态指示灯"</span>
|
||||
</div>
|
||||
|
||||
<div class="flags-layout">
|
||||
<div class="flags-grid">
|
||||
<div v-for="flag in flags" :key="flag.name" class="flag-card" :class="{ active: flag.value === 1 }" @click="toggleFlag(flag)">
|
||||
<div class="flag-name">{{ flag.name }}</div>
|
||||
<div class="flag-value">{{ flag.value }}</div>
|
||||
<div class="flag-fullname">{{ flag.fullName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flag-details" v-if="selectedFlag">
|
||||
<div class="details-header">
|
||||
<span class="flag-title">{{ selectedFlag.name }} - {{ selectedFlag.fullName }}</span>
|
||||
</div>
|
||||
<div class="details-content">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">英文名：</span>
|
||||
<span class="detail-value">{{ selectedFlag.english }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">作用：</span>
|
||||
<span class="detail-value">{{ selectedFlag.description }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">设置条件：</span>
|
||||
<span class="detail-value">{{ selectedFlag.setCondition }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">用途：</span>
|
||||
<span class="detail-value">{{ selectedFlag.usage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="operation-demo">
|
||||
<div class="demo-title">运算结果对标志位的影响</div>
|
||||
|
||||
<div class="operation-panel">
|
||||
<div class="operand-inputs">
|
||||
<div class="input-group">
|
||||
<label>操作数 A：</label>
|
||||
<input type="number" v-model.number="operandA" class="num-input" />
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>操作数 B：</label>
|
||||
<input type="number" v-model.number="operandB" class="num-input" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="operation-buttons">
|
||||
<button class="op-btn" @click="calculate('ADD')">A + B</button>
|
||||
<button class="op-btn" @click="calculate('SUB')">A - B</button>
|
||||
<button class="op-btn" @click="calculate('AND')">A AND B</button>
|
||||
<button class="op-btn" @click="calculate('OR')">A OR B</button>
|
||||
</div>
|
||||
|
||||
<div class="result-display">
|
||||
<div class="result-label">运算结果：</div>
|
||||
<div class="result-value">{{ result }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flags-result">
|
||||
<div class="result-flags">
|
||||
<span v-for="f in flags" :key="f.name" :class="['result-flag', f.value === 1 ? 'set' : 'clear']">
|
||||
{{ f.name }}:{{ f.value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="psw-usage">
|
||||
<div class="usage-title">标志位的典型用途</div>
|
||||
<div class="usage-grid">
|
||||
<div class="usage-card">
|
||||
<div class="usage-icon">🔀</div>
|
||||
<div class="usage-name">条件跳转</div>
|
||||
<div class="usage-desc">JE (相等跳转)、JNE、JG、JL 等指令根据 ZF、SF、OF 决定是否跳转</div>
|
||||
</div>
|
||||
<div class="usage-card">
|
||||
<div class="usage-icon">➕</div>
|
||||
<div class="usage-name">算术运算</div>
|
||||
<div class="usage-desc">多位数运算需要 CF 判断进位，OF 判断溢出</div>
|
||||
</div>
|
||||
<div class="usage-card">
|
||||
<div class="usage-icon">🔄</div>
|
||||
<div class="usage-name">循环控制</div>
|
||||
<div class="usage-desc">循环指令使用 ZF 判断循环结束条件</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selectedFlag = ref(null)
|
||||
const operandA = ref(10)
|
||||
const operandB = ref(5)
|
||||
const result = ref(0)
|
||||
|
||||
const flags = ref([
|
||||
{ name: 'CF', fullName: '进位标志', english: 'Carry Flag', value: 0,
|
||||
description: '无符号数运算产生进位或借位时置 1',
|
||||
setCondition: '加法产生进位，或减法产生借位',
|
||||
usage: '多位数无符号运算、循环计数' },
|
||||
{ name: 'PF', fullName: '奇偶标志', english: 'Parity Flag', value: 0,
|
||||
description: '结果的低 8 位中 1 的个数为偶数时置 1',
|
||||
setCondition: '结果低 8 位有偶数个 1',
|
||||
usage: '数据通信中的错误检测' },
|
||||
{ name: 'AF', fullName: '辅助进位', english: 'Auxiliary Carry Flag', value: 0,
|
||||
description: '低 4 位产生进位或借位时置 1',
|
||||
setCondition: '第 3 位（低 4 位）产生进位',
|
||||
usage: 'BCD 码运算调整' },
|
||||
{ name: 'ZF', fullName: '零标志', english: 'Zero Flag', value: 0,
|
||||
description: '运算结果为 0 时置 1',
|
||||
setCondition: '结果 = 0',
|
||||
usage: '条件跳转、循环控制、比较操作' },
|
||||
{ name: 'SF', fullName: '符号标志', english: 'Sign Flag', value: 0,
|
||||
description: '运算结果为负数时置 1（等于结果最高位）',
|
||||
setCondition: '结果最高位 = 1（负数）',
|
||||
usage: '有符号数大小比较、负数判断' },
|
||||
{ name: 'TF', fullName: '陷阱标志', english: 'Trap Flag', value: 0,
|
||||
description: '置 1 时 CPU 进入单步调试模式',
|
||||
setCondition: '软件设置',
|
||||
usage: '程序调试' },
|
||||
{ name: 'IF', fullName: '中断标志', english: 'Interrupt Flag', value: 1,
|
||||
description: '置 1 时 CPU 响应可屏蔽中断',
|
||||
setCondition: '软件设置',
|
||||
usage: '中断开关' },
|
||||
{ name: 'DF', fullName: '方向标志', english: 'Direction Flag', value: 0,
|
||||
description: '置 1 时字符串操作从高地址向低地址',
|
||||
setCondition: '软件设置',
|
||||
usage: '字符串操作方向控制' },
|
||||
{ name: 'OF', fullName: '溢出标志', english: 'Overflow Flag', value: 0,
|
||||
description: '有符号数运算结果超出表示范围时置 1',
|
||||
setCondition: '正溢出或负溢出',
|
||||
usage: '有符号数运算、溢出检测' }
|
||||
])
|
||||
|
||||
const toggleFlag = (flag) => {
|
||||
flag.value = flag.value === 1 ? 0 : 1
|
||||
selectedFlag.value = flag
|
||||
}
|
||||
|
||||
const calculate = (op) => {
|
||||
let res = 0
|
||||
|
||||
if (op === 'ADD') {
|
||||
res = operandA.value + operandB.value
|
||||
|
||||
const unsignedMax = Math.pow(2, 32)
|
||||
const signedMin = -Math.pow(2, 31)
|
||||
const signedMax = Math.pow(2, 31) - 1
|
||||
|
||||
flags.value.find(f => f.name === 'CF').value = res >= unsignedMax ? 1 : 0
|
||||
flags.value.find(f => f.name === 'OF').value = (res > signedMax || res < signedMin) ? 1 : 0
|
||||
flags.value.find(f => f.name === 'ZF').value = res === 0 ? 1 : 0
|
||||
flags.value.find(f => f.name === 'SF').value = res < 0 ? 1 : 0
|
||||
|
||||
const low8 = res & 0xFF
|
||||
const ones = (low8.toString(2).match(/1/g) || []).length
|
||||
flags.value.find(f => f.name === 'PF').value = ones % 2 === 0 ? 1 : 0
|
||||
|
||||
flags.value.find(f => f.name === 'AF').value = ((operandA.value & 0xF) + (operandB.value & 0xF)) >= 16 ? 1 : 0
|
||||
|
||||
} else if (op === 'SUB') {
|
||||
res = operandA.value - operandB.value
|
||||
|
||||
flags.value.find(f => f.name === 'CF').value = operandA.value < operandB.value ? 1 : 0
|
||||
flags.value.find(f => f.name === 'OF').value = (operandA.value > 0 && operandB.value < 0 && res < 0) || (operandA.value < 0 && operandB.value > 0 && res > 0) ? 1 : 0
|
||||
flags.value.find(f => f.name === 'ZF').value = res === 0 ? 1 : 0
|
||||
flags.value.find(f => f.name === 'SF').value = res < 0 ? 1 : 0
|
||||
|
||||
const low8 = res & 0xFF
|
||||
const ones = (low8.toString(2).match(/1/g) || []).length
|
||||
flags.value.find(f => f.name === 'PF').value = ones % 2 === 0 ? 1 : 0
|
||||
|
||||
flags.value.find(f => f.name === 'AF').value = ((operandA.value & 0xF) - (operandB.value & 0xF)) < 0 ? 1 : 0
|
||||
|
||||
} else if (op === 'AND') {
|
||||
res = operandA.value & operandB.value
|
||||
|
||||
flags.value.find(f => f.name === 'CF').value = 0
|
||||
flags.value.find(f => f.name === 'OF').value = 0
|
||||
flags.value.find(f => f.name === 'ZF').value = res === 0 ? 1 : 0
|
||||
flags.value.find(f => f.name === 'SF').value = (res & 0x80000000) !== 0 ? 1 : 0
|
||||
|
||||
const low8 = res & 0xFF
|
||||
const ones = (low8.toString(2).match(/1/g) || []).length
|
||||
flags.value.find(f => f.name === 'PF').value = ones % 2 === 0 ? 1 : 0
|
||||
|
||||
} else if (op === 'OR') {
|
||||
res = operandA.value | operandB.value
|
||||
|
||||
flags.value.find(f => f.name === 'CF').value = 0
|
||||
flags.value.find(f => f.name === 'OF').value = 0
|
||||
flags.value.find(f => f.name === 'ZF').value = res === 0 ? 1 : 0
|
||||
flags.value.find(f => f.name === 'SF').value = (res & 0x80000000) !== 0 ? 1 : 0
|
||||
|
||||
const low8 = res & 0xFF
|
||||
const ones = (low8.toString(2).match(/1/g) || []).length
|
||||
flags.value.find(f => f.name === 'PF').value = ones % 2 === 0 ? 1 : 0
|
||||
}
|
||||
|
||||
result.value = res
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.psw-demo {
|
||||
background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.flags-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.flag-card {
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.flag-card:hover {
|
||||
border-color: #14b8a6;
|
||||
}
|
||||
|
||||
.flag-card.active {
|
||||
border-color: #14b8a6;
|
||||
background: #f0fdfa;
|
||||
}
|
||||
|
||||
.flag-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.flag-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.flag-card.active .flag-value {
|
||||
color: #14b8a6;
|
||||
}
|
||||
|
||||
.flag-fullname {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.flag-details {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.details-header {
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.flag-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.details-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 12px;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.operation-demo {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.operand-inputs {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.num-input {
|
||||
width: 80px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.operation-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.op-btn {
|
||||
padding: 8px 16px;
|
||||
background: #14b8a6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.result-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #14b8a6;
|
||||
}
|
||||
|
||||
.flags-result {
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.result-flags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.result-flag {
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-flag.set {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.result-flag.clear {
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.psw-usage {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.usage-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.usage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.usage-card {
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.usage-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.usage-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.usage-desc {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<div class="pipeline-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">CPU 指令流水线</span>
|
||||
<span class="subtitle">五级流水线：取指 → 译码 → 执行 → 访存 → 写回</span>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<button class="btn" @click="startPipeline" :disabled="isRunning">开始执行</button>
|
||||
<button class="btn" @click="stepPipeline" :disabled="isRunning">单步执行</button>
|
||||
<button class="btn" @click="resetPipeline">重置</button>
|
||||
<select v-model="selectedMode" class="mode-select">
|
||||
<option value="sequential">顺序执行</option>
|
||||
<option value="pipeline">流水线执行</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="pipeline-visualization">
|
||||
<div class="stage-header">
|
||||
<div v-for="stage in stages" :key="stage" class="stage-label">{{ stage }}</div>
|
||||
</div>
|
||||
|
||||
<div class="instruction-grid">
|
||||
<div v-for="(inst, i) in instructions" :key="i" class="instruction-row">
|
||||
<div class="inst-label">{{ inst }}</div>
|
||||
<div v-for="(stage, j) in stages" :key="j" class="stage-cell">
|
||||
<div v-if="isActive(i, j)" :class="['pipeline-box', currentStageClass(i, j)]">
|
||||
{{ inst }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-panel">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">总周期数</span>
|
||||
<span class="stat-value">{{ totalCycles }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">已完成指令</span>
|
||||
<span class="stat-value">{{ completedInstructions }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">CPI</span>
|
||||
<span class="stat-value">{{ cpi }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pipeline-explanation">
|
||||
<div class="explanation-title">流水线原理</div>
|
||||
<div class="explanation-content">
|
||||
<p><strong>顺序执行：</strong>每条指令执行完才执行下一条，N条指令需要 N × 5 个周期</p>
|
||||
<p><strong>流水线执行：</strong>多条指令同时处于不同阶段，理想情况下 CPI ≈ 1</p>
|
||||
<div class="hazard-warning" v-if="showHazard">
|
||||
⚠️ 流水线冒险：数据冒险、控制冒险、结构冒险
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const stages = ['取指(IF)', '译码(ID)', '执行(EX)', '访存(MEM)', '写回(WB)']
|
||||
const instructions = ref(['ADD R1,R2,R3', 'SUB R4,R1,R5', 'LOAD R6,[R4]', 'STORE R6,[R7]', 'AND R8,R1,R6'])
|
||||
|
||||
const selectedMode = ref('pipeline')
|
||||
const currentCycle = ref(-1)
|
||||
const isRunning = ref(false)
|
||||
const showHazard = ref(false)
|
||||
|
||||
const pipelineState = ref([])
|
||||
|
||||
const startPipeline = () => {
|
||||
isRunning.value = true
|
||||
currentCycle.value = -1
|
||||
runCycle()
|
||||
}
|
||||
|
||||
const runCycle = () => {
|
||||
if (currentCycle.value >= 20) {
|
||||
isRunning.value = false
|
||||
return
|
||||
}
|
||||
currentCycle.value++
|
||||
setTimeout(runCycle, 800)
|
||||
}
|
||||
|
||||
const stepPipeline = () => {
|
||||
if (currentCycle.value < 20) {
|
||||
currentCycle.value++
|
||||
}
|
||||
}
|
||||
|
||||
const resetPipeline = () => {
|
||||
currentCycle.value = -1
|
||||
isRunning.value = false
|
||||
showHazard.value = false
|
||||
}
|
||||
|
||||
const isActive = (instIdx, stageIdx) => {
|
||||
if (selectedMode.value === 'sequential') {
|
||||
return currentCycle.value >= 0 && instIdx === Math.floor(currentCycle.value / 5) && stageIdx === currentCycle.value % 5
|
||||
} else {
|
||||
const offset = instIdx * 5
|
||||
return currentCycle.value >= offset && currentCycle.value < offset + 5 && stageIdx === currentCycle.value - offset
|
||||
}
|
||||
}
|
||||
|
||||
const currentStageClass = (instIdx, stageIdx) => {
|
||||
if (!isActive(instIdx, stageIdx)) return ''
|
||||
return 'stage-' + stageIdx
|
||||
}
|
||||
|
||||
const totalCycles = computed(() => {
|
||||
if (currentCycle.value < 0) return 0
|
||||
if (selectedMode.value === 'sequential') {
|
||||
return (currentCycle.value + 1)
|
||||
} else {
|
||||
return currentCycle.value + 1
|
||||
}
|
||||
})
|
||||
|
||||
const completedInstructions = computed(() => {
|
||||
if (currentCycle.value < 0) return 0
|
||||
if (selectedMode.value === 'sequential') {
|
||||
return Math.floor((currentCycle.value + 1) / 5)
|
||||
} else {
|
||||
return Math.max(0, currentCycle.value - 4)
|
||||
}
|
||||
})
|
||||
|
||||
const cpi = computed(() => {
|
||||
if (completedInstructions.value === 0) return 0
|
||||
return (totalCycles.value / completedInstructions.value).toFixed(2)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pipeline-demo {
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
background: #94a3b8;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.mode-select {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.pipeline-visualization {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
display: grid;
|
||||
grid-template-columns: 100px repeat(5, 1fr);
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stage-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instruction-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.instruction-row {
|
||||
display: grid;
|
||||
grid-template-columns: 100px repeat(5, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.inst-label {
|
||||
font-size: 12px;
|
||||
color: #1e293b;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.stage-cell {
|
||||
height: 28px;
|
||||
background: #f8fafc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pipeline-box {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-0 { background: #f97316; }
|
||||
.stage-1 { background: #eab308; }
|
||||
.stage-2 { background: #22c55e; }
|
||||
.stage-3 { background: #3b82f6; }
|
||||
.stage-4 { background: #8b5cf6; }
|
||||
|
||||
.stats-panel {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.pipeline-explanation {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.explanation-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.explanation-content p {
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.hazard-warning {
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
background: #fef3c7;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: #92400e;
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +1,30 @@
|
||||
<template>
|
||||
<div class="power-on-demo">
|
||||
<div class="demo-label">电脑启动第一步 ── 点击通电</div>
|
||||
|
||||
<div class="sequence" @click="powerOn = !powerOn">
|
||||
<div class="step" :class="{ active: powerOn }">
|
||||
<div class="step-icon">🔌</div>
|
||||
<div class="step-name">电源</div>
|
||||
<div class="step-status">{{ powerOn ? '✅ 供电中' : '⬜ 等待' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">→</div>
|
||||
|
||||
<div class="step" :class="{ active: powerOn }">
|
||||
<div class="step-icon">🔋</div>
|
||||
<div class="step-name">主板</div>
|
||||
<div class="step-status">{{ powerOn ? '✅ 唤醒' : '⬜ 等待' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">→</div>
|
||||
|
||||
<div class="step" :class="{ active: powerOn }">
|
||||
<div class="step-icon">⚙️</div>
|
||||
<div class="step-name">CPU</div>
|
||||
<div class="step-status">{{ powerOn ? '✅ 复位' : '⬜ 等待' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">→</div>
|
||||
|
||||
<div class="step" :class="{ active: powerOn }">
|
||||
<div class="step-icon">💾</div>
|
||||
<div class="step-name">BIOS</div>
|
||||
<div class="step-status">{{ powerOn ? '✅ 启动' : '⬜ 等待' }}</div>
|
||||
<div class="demo-title">硬件启动链路</div>
|
||||
<div class="flow">
|
||||
<div v-for="(step, i) in steps" :key="step.name" class="flow-item">
|
||||
<div class="step-card">
|
||||
<div class="step-icon">{{ step.icon }}</div>
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
</div>
|
||||
<div v-if="i < steps.length - 1" class="arrow">
|
||||
<svg width="24" height="16" viewBox="0 0 24 16">
|
||||
<path d="M0 8h18M14 3l6 5-6 5" fill="none" stroke="var(--vp-c-text-3)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tap-hint">👆 点击切换电源状态</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const powerOn = ref(false)
|
||||
const steps = [
|
||||
{ icon: '🔌', name: '电源 PSU', desc: '交流电 → 直流电' },
|
||||
{ icon: '🧩', name: '主板芯片组', desc: '协调各硬件部件' },
|
||||
{ icon: '⚙️', name: 'CPU 复位', desc: '清零寄存器，就绪' },
|
||||
{ icon: '📟', name: 'BIOS/UEFI', desc: '执行第一条指令' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -50,66 +34,55 @@ const powerOn = ref(false)
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
.demo-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.sequence {
|
||||
.flow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.3rem;
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.step {
|
||||
.flow-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
.step-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.6rem;
|
||||
border-radius: 6px;
|
||||
opacity: 0.4;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.step.active {
|
||||
opacity: 1;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
min-width: 5.5rem;
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.step-icon { font-size: 1.4rem; margin-bottom: 0.3rem; }
|
||||
.step-name {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.step-status {
|
||||
font-size: 0.65rem;
|
||||
.step-desc {
|
||||
font-size: 0.62rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.tap-hint {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.arrow {
|
||||
padding: 0 0.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.flow { flex-direction: column; gap: 0.2rem; }
|
||||
.flow-item { flex-direction: column; }
|
||||
.arrow { transform: rotate(90deg); padding: 0.1rem 0; }
|
||||
}
|
||||
</style>
|
||||
|
||||
+290
-139
@@ -1,194 +1,345 @@
|
||||
<template>
|
||||
<div class="register-demo">
|
||||
<div class="demo-label">1 位寄存器 ── 只在"写入"时更新存储值</div>
|
||||
<div class="cpu-registers-demo">
|
||||
<div class="demo-header">
|
||||
<span class="title">CPU 寄存器组</span>
|
||||
<span class="subtitle">CPU 内部的高速存储单元</span>
|
||||
</div>
|
||||
|
||||
<div class="reg-panel">
|
||||
<!-- Input -->
|
||||
<div class="reg-block">
|
||||
<span class="reg-title">输入</span>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ on: inputData === 1 }"
|
||||
@click="inputData = inputData === 1 ? 0 : 1"
|
||||
>
|
||||
{{ inputData }}
|
||||
</button>
|
||||
<div class="registers-layout">
|
||||
<!-- 专用寄存器 -->
|
||||
<div class="reg-section special-regs">
|
||||
<div class="section-title">专用寄存器 (Special Registers)</div>
|
||||
<div class="reg-grid">
|
||||
<div v-for="reg in specialRegisters" :key="reg.name" class="reg-card" :class="{ active: activeReg === reg.name }" @click="selectReg(reg)">
|
||||
<div class="reg-name">{{ reg.name }}</div>
|
||||
<div class="reg-value">{{ reg.value }}</div>
|
||||
<div class="reg-desc">{{ reg.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Write -->
|
||||
<button
|
||||
class="write-btn"
|
||||
:class="{ flash: isWriting }"
|
||||
@click="writeOnce"
|
||||
>
|
||||
写入 →
|
||||
</button>
|
||||
|
||||
<!-- Stored -->
|
||||
<div class="reg-block">
|
||||
<span class="reg-title">存储</span>
|
||||
<span
|
||||
class="val-box"
|
||||
:class="{ on: storedData === 1, flash: isWriting }"
|
||||
>{{ storedData }}</span>
|
||||
<!-- 通用寄存器 -->
|
||||
<div class="reg-section general-regs">
|
||||
<div class="section-title">通用寄存器 (General Purpose Registers)</div>
|
||||
<div class="reg-grid">
|
||||
<div v-for="reg in generalRegisters" :key="reg.name" class="reg-card small" :class="{ active: activeReg === reg.name }" @click="selectReg(reg)">
|
||||
<div class="reg-name">{{ reg.name }}</div>
|
||||
<div class="reg-value">{{ reg.value }}</div>
|
||||
<div class="reg-desc">{{ reg.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Output -->
|
||||
<div class="reg-block">
|
||||
<span class="reg-title">输出</span>
|
||||
<span class="val-box out" :class="{ on: storedData === 1 }">{{
|
||||
storedData
|
||||
}}</span>
|
||||
<!-- 状态寄存器 -->
|
||||
<div class="reg-section status-reg">
|
||||
<div class="section-title">程序状态字 (PSW / FLAGS)</div>
|
||||
<div class="flags-container">
|
||||
<div v-for="flag in statusFlags" :key="flag.name" class="flag-bit" :class="{ set: flag.value === 1 }">
|
||||
<span class="flag-name">{{ flag.name }}</span>
|
||||
<span class="flag-value">{{ flag.value }}</span>
|
||||
<span class="flag-desc">{{ flag.desc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-line">
|
||||
{{
|
||||
inputData !== storedData
|
||||
? '⚡ 输入≠存储 → 点"写入"即可更新'
|
||||
: '✓ 输入与存储一致'
|
||||
}}
|
||||
<!-- 寄存器详解 -->
|
||||
<div class="reg-details" v-if="selectedReg">
|
||||
<div class="details-header">
|
||||
<span class="details-title">{{ selectedReg.name }} 寄存器</span>
|
||||
<span class="details-type">{{ selectedReg.type }}</span>
|
||||
</div>
|
||||
<div class="details-content">{{ selectedReg.detail }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 寄存器说明 -->
|
||||
<div class="register-explanation">
|
||||
<div class="exp-title">寄存器 vs 内存</div>
|
||||
<div class="exp-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>特性</th>
|
||||
<th>寄存器</th>
|
||||
<th>内存 (RAM)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>位置</td>
|
||||
<td>CPU 内部</td>
|
||||
<td>CPU 外部</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>访问速度</td>
|
||||
<td>最快 (< 1ns)</td>
|
||||
<td>较慢 (50-100ns)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>容量</td>
|
||||
<td>极小 (Bytes)</td>
|
||||
<td>大 (GB)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>作用</td>
|
||||
<td>暂存指令/操作数/结果</td>
|
||||
<td>存储程序和数据</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const inputData = ref(0)
|
||||
const storedData = ref(0)
|
||||
const isWriting = ref(false)
|
||||
const activeReg = ref('')
|
||||
const selectedReg = ref(null)
|
||||
|
||||
const writeOnce = () => {
|
||||
isWriting.value = true
|
||||
storedData.value = inputData.value
|
||||
setTimeout(() => {
|
||||
isWriting.value = false
|
||||
}, 400)
|
||||
const specialRegisters = ref([
|
||||
{ name: 'PC', value: '0x00401000', desc: '程序计数器', type: '专用寄存器', detail: 'Program Counter，存放下一条要执行的指令地址。每执行一条指令，PC 自动加 4（32位）或 8（64位），指向下一条指令。' },
|
||||
{ name: 'IR', value: '0x8B450008', desc: '指令寄存器', type: '专用寄存器', detail: 'Instruction Register，存放当前正在执行的指令。CPU 从内存取指令后，先存入 IR，再送入译码器进行解析。' },
|
||||
{ name: 'MAR', value: '0x00401000', desc: '内存地址寄存器', type: '专用寄存器', detail: 'Memory Address Register，存放要访问的内存地址。CPU 通过它向地址总线发送内存位置。' },
|
||||
{ name: 'MDR', value: '0x00000000', desc: '内存数据寄存器', type: '专用寄存器', detail: 'Memory Data Register，临时存放要写入或从内存读取的数据。是 CPU 与内存交换数据的桥梁。' },
|
||||
{ name: 'ACC', value: '0x0000001A', desc: '累加器', type: '专用寄存器', detail: 'Accumulator，传统 CPU 中最重要的寄存器，用于存放算术运算和逻辑运算的中间结果。' },
|
||||
])
|
||||
|
||||
const generalRegisters = ref([
|
||||
{ name: 'RAX', value: '0x00000000', desc: '返回值', type: '通用寄存器', detail: '64位寄存器，用于存放函数返回值。低32位为 EAX，低16位为 AX，低8位为 AL。' },
|
||||
{ name: 'RBX', value: '0x00000000', desc: '基址寄存器', type: '通用寄存器', detail: '64位通用寄存器，可用于存放数据或内存地址。' },
|
||||
{ name: 'RCX', value: '0x00000000', desc: '计数寄存器', type: '通用寄存器', detail: '64位通用寄存器，常用于循环计数。低32位为 ECX。' },
|
||||
{ name: 'RDX', value: '0x00000000', desc: '数据寄存器', type: '通用寄存器', detail: '64位通用寄存器，用于存放数据，也用于乘除法指令。' },
|
||||
{ name: 'RSI', value: '0x00000000', desc: '源索引', type: '通用寄存器', detail: 'Source Index，字符串操作中作为源地址指针。' },
|
||||
{ name: 'RDI', value: '0x00000000', desc: '目标索引', type: '通用寄存器', detail: 'Destination Index，字符串操作中作为目标地址指针。' },
|
||||
{ name: 'RBP', value: '0x00000000', desc: '栈帧指针', type: '通用寄存器', detail: 'Base Pointer，指向函数栈帧的基址，用于访问局部变量和函数参数。' },
|
||||
{ name: 'RSP', value: '0x7FFDE000', desc: '栈指针', type: '通用寄存器', detail: 'Stack Pointer，指向当前栈顶位置。Push 操作减 4，Pop 操作加 4。' },
|
||||
])
|
||||
|
||||
const statusFlags = ref([
|
||||
{ name: 'CF', value: 0, desc: '进位标志' },
|
||||
{ name: 'PF', value: 0, desc: '奇偶标志' },
|
||||
{ name: 'AF', value: 0, desc: '辅助进位' },
|
||||
{ name: 'ZF', value: 0, desc: '零标志' },
|
||||
{ name: 'SF', value: 0, desc: '符号标志' },
|
||||
{ name: 'OF', value: 0, desc: '溢出标志' },
|
||||
])
|
||||
|
||||
const selectReg = (reg) => {
|
||||
selectedReg.value = reg
|
||||
activeReg.value = reg.name
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.register-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
.cpu-registers-demo {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* ── panel ── */
|
||||
.reg-panel {
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.6rem 0.8rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.reg-block {
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.registers-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.reg-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.reg-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.reg-card {
|
||||
padding: 10px;
|
||||
background: #f8fafc;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.reg-card:hover {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.reg-card.active {
|
||||
border-color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.reg-card.small {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.reg-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.reg-value {
|
||||
font-size: 11px;
|
||||
font-family: monospace;
|
||||
color: #0369a1;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.reg-desc {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.status-reg {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.flags-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.flag-bit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 8px 12px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 4px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.reg-title {
|
||||
font-size: 0.7rem;
|
||||
.flag-bit.set {
|
||||
background: #dbeafe;
|
||||
border: 1px solid #3b82f6;
|
||||
}
|
||||
|
||||
.flag-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-3);
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
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;
|
||||
font-size: 1rem;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
.flag-value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.toggle-btn.on {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
color: var(--vp-c-brand-1);
|
||||
background: var(--vp-c-brand-soft);
|
||||
.flag-bit.set .flag-value {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.write-btn {
|
||||
padding: 0.35rem 0.7rem;
|
||||
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-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
.flag-desc {
|
||||
font-size: 9px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.write-btn:hover {
|
||||
background: var(--vp-c-warning-soft, rgba(217, 119, 6, 0.1));
|
||||
.reg-details {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
.write-btn.flash {
|
||||
background: var(--vp-c-warning-1, #d97706);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.val-box {
|
||||
display: inline-flex;
|
||||
.details-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 1rem;
|
||||
transition: all 0.2s;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.val-box.on {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
color: var(--vp-c-brand-1);
|
||||
background: var(--vp-c-brand-soft);
|
||||
.details-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.val-box.flash {
|
||||
box-shadow: 0 0 0 3px var(--vp-c-warning-soft, rgba(217, 119, 6, 0.25));
|
||||
.details-type {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
background: #e0f2fe;
|
||||
border-radius: 4px;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.val-box.out {
|
||||
border-style: dashed;
|
||||
.details-content {
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.status-line {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--vp-c-text-3);
|
||||
.register-explanation {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.reg-panel {
|
||||
justify-content: center;
|
||||
}
|
||||
.exp-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.exp-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.exp-table th,
|
||||
.exp-table td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.exp-table th {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.exp-table td {
|
||||
color: #475569;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,40 +1,29 @@
|
||||
<template>
|
||||
<div class="rendering-demo">
|
||||
<div class="demo-label">浏览器渲染过程 ── 点击逐步演示</div>
|
||||
|
||||
<div class="demo-title">浏览器渲染管线</div>
|
||||
<div class="pipeline">
|
||||
<div
|
||||
v-for="(stage, index) in stages"
|
||||
:key="stage.name"
|
||||
class="pipeline-stage"
|
||||
:class="{ active: currentStage >= index }"
|
||||
@click="currentStage = index"
|
||||
>
|
||||
<div class="stage-header">
|
||||
<span class="stage-num">{{ index + 1 }}</span>
|
||||
<span class="stage-name">{{ stage.name }}</span>
|
||||
</div>
|
||||
<div class="stage-desc">{{ stage.desc }}</div>
|
||||
<div v-if="currentStage >= index" class="stage-detail">
|
||||
{{ stage.detail }}
|
||||
<div v-for="(stage, i) in stages" :key="stage.name" class="pipe-item">
|
||||
<div class="pipe-card">
|
||||
<div class="pipe-num">{{ i + 1 }}</div>
|
||||
<div class="pipe-info">
|
||||
<div class="pipe-name">{{ stage.name }}</div>
|
||||
<div class="pipe-desc">{{ stage.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="i < stages.length - 1" class="pipe-arrow">↓</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tap-hint">👆 点击查看各阶段详情</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const currentStage = ref(0)
|
||||
const stages = [
|
||||
{ name: 'HTML 解析', desc: '把 HTML 变成 DOM 树', detail: '<div> → Document Object Model 树结构' },
|
||||
{ name: 'CSS 解析', desc: '把 CSS 变成样式规则', detail: '选择器 + 属性 → 样式规则表' },
|
||||
{ name: '渲染树', desc: 'DOM + CSS = 渲染树', detail: '哪些节点显示、什么样式' },
|
||||
{ name: '布局计算', desc: '计算每个元素的位置', detail: '宽高、坐标、层级' },
|
||||
{ name: '绘制', desc: '把内容画到像素缓冲区', detail: '文字、颜色、图片、边框' },
|
||||
{ name: '合成', desc: '多层合成一张图', detail: 'GPU 合成，显示到屏幕' }
|
||||
{ name: 'HTML 解析', desc: '将 HTML 文本解析为 DOM 树（文档对象模型）' },
|
||||
{ name: 'CSS 解析', desc: '将 CSS 规则解析为样式表，计算每个元素的最终样式' },
|
||||
{ name: '构建渲染树', desc: 'DOM 树 + 样式规则 = 渲染树（只包含可见元素）' },
|
||||
{ name: '布局计算', desc: '计算每个元素在页面上的精确位置和大小' },
|
||||
{ name: '绘制', desc: '将元素的文字、颜色、图片、边框等绘制到像素缓冲区' },
|
||||
{ name: '合成显示', desc: '将多个图层合成为最终画面，由 GPU 输出到屏幕' }
|
||||
]
|
||||
</script>
|
||||
|
||||
@@ -45,87 +34,63 @@ const stages = [
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.pipeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.pipeline-stage {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.6rem;
|
||||
opacity: 0.4;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.pipeline-stage.active {
|
||||
opacity: 1;
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.stage-num {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
background: var(--vp-c-divider);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.pipeline-stage.active .stage-num {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stage-name {
|
||||
.demo-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.stage-desc {
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.15rem;
|
||||
.pipeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stage-detail {
|
||||
.pipe-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.pipe-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.6rem;
|
||||
padding: 0.45rem 0.7rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
.pipe-num {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-brand);
|
||||
margin-top: 0.3rem;
|
||||
padding: 0.25rem 0.4rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.tap-hint {
|
||||
text-align: center;
|
||||
.pipe-info { flex: 1; }
|
||||
.pipe-name {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.pipe-desc {
|
||||
font-size: 0.63rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.75rem;
|
||||
margin-top: 0.1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.pipe-arrow {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
padding: 0.15rem 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
+131
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="static-vs-dynamic-demo">
|
||||
<h4>🔍 静态类型 vs 动态类型：实时对比</h4>
|
||||
<p class="desc">选择一段代码，观察两种类型系统的不同行为</p>
|
||||
|
||||
<div class="example-selector">
|
||||
<button
|
||||
v-for="(ex, i) in examples"
|
||||
:key="i"
|
||||
:class="['ex-btn', { active: selected === i }]"
|
||||
@click="selected = i"
|
||||
>
|
||||
{{ ex.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="panel static-panel">
|
||||
<div class="panel-header">
|
||||
<span class="badge">静态类型（TypeScript）</span>
|
||||
<span class="timing">⏱ 编译时检查</span>
|
||||
</div>
|
||||
<pre class="code-block">{{ examples[selected].staticCode }}</pre>
|
||||
<div :class="['result', examples[selected].staticOk ? 'ok' : 'err']">
|
||||
{{ examples[selected].staticResult }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs">VS</div>
|
||||
|
||||
<div class="panel dynamic-panel">
|
||||
<div class="panel-header">
|
||||
<span class="badge dynamic">动态类型（JavaScript）</span>
|
||||
<span class="timing">⏱ 运行时检查</span>
|
||||
</div>
|
||||
<pre class="code-block">{{ examples[selected].dynamicCode }}</pre>
|
||||
<div :class="['result', examples[selected].dynamicOk ? 'ok' : 'err']">
|
||||
{{ examples[selected].dynamicResult }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="insight">
|
||||
💡 {{ examples[selected].insight }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selected = ref(0)
|
||||
|
||||
const examples = [
|
||||
{
|
||||
label: '变量赋值',
|
||||
staticCode: `let name: string = "Alice"
|
||||
name = 42 // ❌ 编译错误`,
|
||||
dynamicCode: `let name = "Alice"
|
||||
name = 42 // ✅ 没问题`,
|
||||
staticResult: '❌ Type "number" is not assignable to type "string"',
|
||||
dynamicResult: '✅ 运行正常，name 变成了 42',
|
||||
staticOk: false,
|
||||
dynamicOk: true,
|
||||
insight: '静态类型在你写代码时就发现错误，动态类型要等到运行时才知道。'
|
||||
},
|
||||
{
|
||||
label: '函数参数',
|
||||
staticCode: `function add(a: number, b: number) {
|
||||
return a + b
|
||||
}
|
||||
add("1", 2) // ❌ 编译错误`,
|
||||
dynamicCode: `function add(a, b) {
|
||||
return a + b
|
||||
}
|
||||
add("1", 2) // ✅ 返回 "12"`,
|
||||
staticResult: '❌ Argument of type "string" is not assignable to parameter of type "number"',
|
||||
dynamicResult: '✅ 返回 "12"（字符串拼接，不是数学加法！）',
|
||||
staticOk: false,
|
||||
dynamicOk: true,
|
||||
insight: '动态类型的"灵活"有时是 bug 的温床——你期望 3，却得到 "12"。'
|
||||
},
|
||||
{
|
||||
label: '属性访问',
|
||||
staticCode: `interface User { name: string }
|
||||
let user: User = { name: "Bob" }
|
||||
console.log(user.age) // ❌ 编译错误`,
|
||||
dynamicCode: `let user = { name: "Bob" }
|
||||
console.log(user.age) // ✅ 输出 undefined`,
|
||||
staticResult: '❌ Property "age" does not exist on type "User"',
|
||||
dynamicResult: '✅ 输出 undefined（不报错，但可能导致后续逻辑出错）',
|
||||
staticOk: false,
|
||||
dynamicOk: true,
|
||||
insight: '静态类型能在编译时捕获拼写错误和属性缺失，动态类型只会默默返回 undefined。'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.static-vs-dynamic-demo {
|
||||
padding: 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
.example-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.ex-btn {
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
|
||||
}
|
||||
.ex-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
|
||||
.comparison { display: flex; gap: 12px; align-items: stretch; }
|
||||
.panel { flex: 1; border-radius: 8px; border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg); overflow: hidden; }
|
||||
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--vp-c-bg-soft); border-bottom: 1px solid var(--vp-c-divider); }
|
||||
.badge { font-size: 12px; font-weight: 600; color: var(--vp-c-brand-1); }
|
||||
.badge.dynamic { color: #e5a00d; }
|
||||
.timing { font-size: 11px; color: var(--vp-c-text-3); }
|
||||
.code-block { padding: 12px; margin: 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; }
|
||||
.result { padding: 8px 12px; font-size: 12px; border-top: 1px solid var(--vp-c-divider); }
|
||||
.result.ok { background: #f0fdf4; color: #166534; }
|
||||
.result.err { background: #fef2f2; color: #991b1b; }
|
||||
.vs { display: flex; align-items: center; font-weight: 700; color: var(--vp-c-text-3); font-size: 14px; }
|
||||
.insight { margin-top: 12px; padding: 10px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; font-size: 13px; }
|
||||
@media (max-width: 640px) {
|
||||
.comparison { flex-direction: column; }
|
||||
.vs { justify-content: center; padding: 4px 0; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="strong-vs-weak-demo">
|
||||
<h4>⚡ 强类型 vs 弱类型：隐式转换实验室</h4>
|
||||
<p class="desc">输入一个表达式，看看不同语言怎么处理</p>
|
||||
|
||||
<div class="expr-selector">
|
||||
<button
|
||||
v-for="(ex, i) in expressions"
|
||||
:key="i"
|
||||
:class="['expr-btn', { active: selected === i }]"
|
||||
@click="selected = i"
|
||||
>
|
||||
<code>{{ ex.expr }}</code>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="results-grid">
|
||||
<div v-for="lang in expressions[selected].langs" :key="lang.name" class="lang-card">
|
||||
<div class="lang-header">
|
||||
<span class="lang-name">{{ lang.name }}</span>
|
||||
<span :class="['lang-type', lang.strong ? 'strong' : 'weak']">
|
||||
{{ lang.strong ? '强类型' : '弱类型' }}
|
||||
</span>
|
||||
</div>
|
||||
<pre class="lang-code">{{ lang.code }}</pre>
|
||||
<div :class="['lang-result', lang.error ? 'error' : 'success']">
|
||||
{{ lang.result }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="takeaway">
|
||||
📌 {{ expressions[selected].takeaway }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selected = ref(0)
|
||||
|
||||
const expressions = [
|
||||
{
|
||||
expr: '"1" + 1',
|
||||
langs: [
|
||||
{ name: 'JavaScript', strong: false, code: '"1" + 1', result: '→ "11"（字符串拼接）', error: false },
|
||||
{ name: 'Python', strong: true, code: '"1" + 1', result: '→ TypeError: can only concatenate str to str', error: true },
|
||||
{ name: 'Java', strong: false, code: '"1" + 1', result: '→ "11"（字符串拼接）', error: false },
|
||||
{ name: 'Rust', strong: true, code: '"1" + 1', result: '→ 编译错误：类型不匹配', error: true }
|
||||
],
|
||||
takeaway: '强类型语言拒绝猜测你的意图，宁可报错也不悄悄转换。弱类型语言会"好心"帮你转，但结果可能不是你想要的。'
|
||||
},
|
||||
{
|
||||
expr: 'true + 1',
|
||||
langs: [
|
||||
{ name: 'JavaScript', strong: false, code: 'true + 1', result: '→ 2（true 被转为 1）', error: false },
|
||||
{ name: 'Python', strong: true, code: 'True + 1', result: '→ 2（Python 中 bool 是 int 子类）', error: false },
|
||||
{ name: 'Java', strong: false, code: 'true + 1', result: '→ 编译错误', error: true },
|
||||
{ name: 'C', strong: false, code: '1 + 1 // true=1', result: '→ 2（C 中没有 bool，用 0/1）', error: false }
|
||||
],
|
||||
takeaway: 'bool 和数字的关系因语言而异。Python 虽是强类型，但 bool 继承自 int，这是设计选择而非弱类型。'
|
||||
},
|
||||
{
|
||||
expr: '"5" == 5',
|
||||
langs: [
|
||||
{ name: 'JavaScript', strong: false, code: '"5" == 5', result: '→ true（隐式转换后比较）', error: false },
|
||||
{ name: 'Python', strong: true, code: '"5" == 5', result: '→ False（类型不同，直接 False）', error: false },
|
||||
{ name: 'TypeScript', strong: false, code: '"5" == 5', result: '→ true（但 TSLint 会警告）', error: false },
|
||||
{ name: 'PHP', strong: false, code: '"5" == 5', result: '→ true（臭名昭著的松散比较）', error: false }
|
||||
],
|
||||
takeaway: 'JavaScript 的 == 会做隐式转换，这是无数 bug 的来源。所以社区推荐始终使用 === 严格比较。'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.strong-vs-weak-demo {
|
||||
padding: 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
.expr-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.expr-btn {
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
|
||||
}
|
||||
.expr-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
|
||||
.expr-btn code { font-size: 13px; }
|
||||
.results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
|
||||
.lang-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg); overflow: hidden; }
|
||||
.lang-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--vp-c-bg-soft); border-bottom: 1px solid var(--vp-c-divider); }
|
||||
.lang-name { font-weight: 600; font-size: 13px; }
|
||||
.lang-type { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
|
||||
.lang-type.strong { background: #dbeafe; color: #1e40af; }
|
||||
.lang-type.weak { background: #fef3c7; color: #92400e; }
|
||||
.lang-code { padding: 8px 10px; margin: 0; font-size: 12px; }
|
||||
.lang-result { padding: 6px 10px; font-size: 12px; border-top: 1px solid var(--vp-c-divider); }
|
||||
.lang-result.success { background: #f0fdf4; color: #166534; }
|
||||
.lang-result.error { background: #fef2f2; color: #991b1b; }
|
||||
.takeaway { margin-top: 12px; padding: 10px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; font-size: 13px; }
|
||||
@media (max-width: 640px) { .results-grid { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="type-inference-demo">
|
||||
<h4>🧠 类型推断：编译器如何"猜"出类型</h4>
|
||||
<p class="desc">点击代码行，看编译器如何一步步推断类型</p>
|
||||
|
||||
<div class="code-area">
|
||||
<div
|
||||
v-for="(line, i) in codeLines"
|
||||
:key="i"
|
||||
:class="['code-line', { active: activeLine === i }]"
|
||||
@click="activeLine = i"
|
||||
>
|
||||
<span class="line-num">{{ i + 1 }}</span>
|
||||
<span class="line-code" v-html="line.code"></span>
|
||||
<span v-if="activeLine === i" class="inferred-type">
|
||||
→ {{ line.inferred }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeLine !== null" class="explanation">
|
||||
<div class="explain-header">推断过程</div>
|
||||
<div class="explain-steps">
|
||||
<div v-for="(step, j) in codeLines[activeLine].steps" :key="j" class="step">
|
||||
<span class="step-num">{{ j + 1 }}</span>
|
||||
<span>{{ step }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lang-support">
|
||||
<div class="support-title">各语言的类型推断能力</div>
|
||||
<div class="support-grid">
|
||||
<div v-for="lang in langs" :key="lang.name" class="support-item">
|
||||
<span class="support-name">{{ lang.name }}</span>
|
||||
<div class="support-bar">
|
||||
<div class="support-fill" :style="{ width: lang.level + '%' }"></div>
|
||||
</div>
|
||||
<span class="support-label">{{ lang.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeLine = ref(0)
|
||||
|
||||
const codeLines = [
|
||||
{
|
||||
code: '<span class="kw">let</span> x = <span class="num">42</span>',
|
||||
inferred: 'number',
|
||||
steps: [
|
||||
'右侧是字面量 42',
|
||||
'42 是整数，类型为 number',
|
||||
'推断 x 的类型为 number'
|
||||
]
|
||||
},
|
||||
{
|
||||
code: '<span class="kw">let</span> names = [<span class="str">"Alice"</span>, <span class="str">"Bob"</span>]',
|
||||
inferred: 'string[]',
|
||||
steps: [
|
||||
'右侧是数组字面量 [...]',
|
||||
'数组元素 "Alice"、"Bob" 都是 string',
|
||||
'推断数组类型为 string[]'
|
||||
]
|
||||
},
|
||||
{
|
||||
code: '<span class="kw">let</span> result = x > 10 ? <span class="str">"big"</span> : <span class="str">"small"</span>',
|
||||
inferred: 'string',
|
||||
steps: [
|
||||
'三元表达式的两个分支都是 string',
|
||||
'两个分支类型一致',
|
||||
'推断 result 类型为 string'
|
||||
]
|
||||
},
|
||||
{
|
||||
code: '<span class="kw">const</span> add = (a: <span class="type">number</span>, b: <span class="type">number</span>) => a + b',
|
||||
inferred: '(a: number, b: number) => number',
|
||||
steps: [
|
||||
'参数 a 和 b 显式标注为 number',
|
||||
'number + number 的结果是 number',
|
||||
'推断返回值类型为 number'
|
||||
]
|
||||
},
|
||||
{
|
||||
code: '<span class="kw">let</span> mixed = [<span class="num">1</span>, <span class="str">"two"</span>, <span class="kw">true</span>]',
|
||||
inferred: '(number | string | boolean)[]',
|
||||
steps: [
|
||||
'数组包含 number、string、boolean 三种类型',
|
||||
'取所有元素类型的联合类型',
|
||||
'推断为 (number | string | boolean)[]'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const langs = [
|
||||
{ name: 'Rust', level: 95, label: '几乎全推断' },
|
||||
{ name: 'TypeScript', level: 85, label: '大部分可推断' },
|
||||
{ name: 'Kotlin', level: 80, label: '局部推断强' },
|
||||
{ name: 'Go', level: 50, label: '仅 := 短声明' },
|
||||
{ name: 'Java', level: 40, label: 'var 关键字（Java 10+）' },
|
||||
{ name: 'C', level: 5, label: '几乎不推断' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.type-inference-demo {
|
||||
padding: 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
margin: 16px 0;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
.code-area {
|
||||
background: #1e1e1e; border-radius: 8px; padding: 12px 0; font-family: 'Fira Code', monospace;
|
||||
}
|
||||
.code-line {
|
||||
display: flex; align-items: center; padding: 4px 14px; cursor: pointer;
|
||||
transition: background 0.15s; font-size: 13px; color: #d4d4d4;
|
||||
}
|
||||
.code-line:hover { background: rgba(255,255,255,0.05); }
|
||||
.code-line.active { background: rgba(100,149,237,0.15); }
|
||||
.line-num { color: #858585; width: 24px; text-align: right; margin-right: 12px; font-size: 12px; user-select: none; }
|
||||
.line-code :deep(.kw) { color: #569cd6; }
|
||||
.line-code :deep(.str) { color: #ce9178; }
|
||||
.line-code :deep(.num) { color: #b5cea8; }
|
||||
.line-code :deep(.type) { color: #4ec9b0; }
|
||||
.inferred-type {
|
||||
margin-left: auto; padding: 2px 8px; background: rgba(78,201,176,0.2);
|
||||
color: #4ec9b0; border-radius: 4px; font-size: 12px; white-space: nowrap;
|
||||
}
|
||||
.explanation {
|
||||
margin-top: 12px; border: 1px solid var(--vp-c-divider); border-radius: 8px;
|
||||
background: var(--vp-c-bg); overflow: hidden;
|
||||
}
|
||||
.explain-header { padding: 8px 12px; font-weight: 600; font-size: 13px; background: var(--vp-c-bg-soft); border-bottom: 1px solid var(--vp-c-divider); }
|
||||
.explain-steps { padding: 10px 12px; }
|
||||
.step { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
|
||||
.step-num {
|
||||
width: 20px; height: 20px; border-radius: 50%; background: var(--vp-c-brand-1);
|
||||
color: #fff; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 11px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.lang-support { margin-top: 16px; }
|
||||
.support-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
|
||||
.support-grid { display: flex; flex-direction: column; gap: 6px; }
|
||||
.support-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
|
||||
.support-name { width: 80px; font-weight: 500; text-align: right; }
|
||||
.support-bar { flex: 1; height: 8px; background: var(--vp-c-divider); border-radius: 4px; overflow: hidden; }
|
||||
.support-fill { height: 100%; background: var(--vp-c-brand-1); border-radius: 4px; transition: width 0.5s; }
|
||||
.support-label { width: 140px; color: var(--vp-c-text-3); font-size: 11px; }
|
||||
@media (max-width: 640px) { .support-label { display: none; } }
|
||||
</style>
|
||||
+137
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="type-safety-demo">
|
||||
<h4>🛡️ 类型安全实战：常见陷阱与防御</h4>
|
||||
<p class="desc">点击不同的陷阱场景，学习如何用类型系统保护你的代码</p>
|
||||
|
||||
<div class="trap-selector">
|
||||
<button
|
||||
v-for="(trap, i) in traps"
|
||||
:key="i"
|
||||
:class="['trap-btn', { active: selected === i }]"
|
||||
@click="selected = i"
|
||||
>
|
||||
<span class="trap-icon">{{ trap.icon }}</span>
|
||||
<span>{{ trap.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="trap-detail">
|
||||
<div class="danger-zone">
|
||||
<div class="zone-header danger">⚠️ 危险代码</div>
|
||||
<pre class="code-block">{{ traps[selected].dangerCode }}</pre>
|
||||
<div class="zone-result danger">{{ traps[selected].dangerResult }}</div>
|
||||
</div>
|
||||
|
||||
<div class="safe-zone">
|
||||
<div class="zone-header safe">✅ 安全代码</div>
|
||||
<pre class="code-block">{{ traps[selected].safeCode }}</pre>
|
||||
<div class="zone-result safe">{{ traps[selected].safeResult }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="defense-tip">
|
||||
<div class="tip-header">🔑 防御策略</div>
|
||||
<ul>
|
||||
<li v-for="(tip, j) in traps[selected].tips" :key="j">{{ tip }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selected = ref(0)
|
||||
|
||||
const traps = [
|
||||
{
|
||||
icon: '💣', name: 'null 引用',
|
||||
dangerCode: `function getLength(str) {
|
||||
return str.length // 如果 str 是 null？
|
||||
}
|
||||
getLength(null) // 💥 运行时崩溃`,
|
||||
dangerResult: '💥 TypeError: Cannot read properties of null',
|
||||
safeCode: `function getLength(str: string | null): number {
|
||||
if (str === null) return 0
|
||||
return str.length // ✅ 编译器确保此处 str 不为 null
|
||||
}`,
|
||||
safeResult: '✅ 编译器强制你处理 null 的情况',
|
||||
tips: ['使用 strictNullChecks 编译选项', '用联合类型 string | null 显式标注可空', '用可选链 ?. 安全访问属性']
|
||||
},
|
||||
{
|
||||
icon: '🎭', name: '类型断言滥用',
|
||||
dangerCode: `const data = fetchAPI() as any
|
||||
const name = data.user.profile.name
|
||||
// 如果 API 返回格式变了？`,
|
||||
dangerResult: '💥 运行时崩溃，any 绕过了所有类型检查',
|
||||
safeCode: `interface APIResponse {
|
||||
user: { profile: { name: string } }
|
||||
}
|
||||
const data: APIResponse = await fetchAPI()
|
||||
const name = data.user.profile.name`,
|
||||
safeResult: '✅ 如果 API 格式变了，编译时就能发现',
|
||||
tips: ['避免使用 any，用 unknown 代替', '为 API 响应定义明确的接口', '使用 zod 等库做运行时校验']
|
||||
},
|
||||
{
|
||||
icon: '🔄', name: '隐式转换',
|
||||
dangerCode: `if (userId == 0) {
|
||||
// 当 userId 是 "" 时也会进入！
|
||||
console.log("无效用户")
|
||||
}
|
||||
// "" == 0 → true（隐式转换）`,
|
||||
dangerResult: '💥 空字符串被当成 0，逻辑错误',
|
||||
safeCode: `if (userId === 0) {
|
||||
console.log("无效用户")
|
||||
}
|
||||
// "" === 0 → false（严格比较）`,
|
||||
safeResult: '✅ 严格比较不做隐式转换',
|
||||
tips: ['始终使用 === 而不是 ==', '开启 ESLint 的 eqeqeq 规则', '用 TypeScript 的严格模式']
|
||||
},
|
||||
{
|
||||
icon: '📦', name: '数组类型不安全',
|
||||
dangerCode: `const items = [] // any[] 类型
|
||||
items.push(1)
|
||||
items.push("hello")
|
||||
items.push({ x: 1 })
|
||||
// 数组里什么都有，取出来用时容易出错`,
|
||||
dangerResult: '💥 数组元素类型不一致，后续操作可能崩溃',
|
||||
safeCode: `const items: number[] = []
|
||||
items.push(1)
|
||||
items.push("hello") // ❌ 编译错误！
|
||||
// 编译器确保数组元素类型一致`,
|
||||
safeResult: '✅ 编译时就阻止了类型不一致的元素',
|
||||
tips: ['声明数组时指定元素类型', '使用 ReadonlyArray 防止意外修改', '用元组类型 [string, number] 表示固定结构']
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.type-safety-demo {
|
||||
padding: 20px; border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px; margin: 16px 0; background: var(--vp-c-bg-soft);
|
||||
}
|
||||
h4 { margin: 0 0 4px; }
|
||||
.desc { color: var(--vp-c-text-2); font-size: 14px; margin: 0 0 16px; }
|
||||
.trap-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.trap-btn {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 6px 14px; border-radius: 6px; border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg); cursor: pointer; font-size: 13px; transition: all 0.2s;
|
||||
}
|
||||
.trap-btn.active { background: var(--vp-c-brand-1); color: #fff; border-color: var(--vp-c-brand-1); }
|
||||
.trap-icon { font-size: 16px; }
|
||||
.trap-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
|
||||
.danger-zone, .safe-zone { border-radius: 8px; border: 1px solid var(--vp-c-divider); overflow: hidden; background: var(--vp-c-bg); }
|
||||
.zone-header { padding: 6px 12px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--vp-c-divider); }
|
||||
.zone-header.danger { background: #fef2f2; color: #991b1b; }
|
||||
.zone-header.safe { background: #f0fdf4; color: #166534; }
|
||||
.code-block { padding: 10px 12px; margin: 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
|
||||
.zone-result { padding: 6px 12px; font-size: 12px; border-top: 1px solid var(--vp-c-divider); }
|
||||
.zone-result.danger { background: #fef2f2; color: #991b1b; }
|
||||
.zone-result.safe { background: #f0fdf4; color: #166534; }
|
||||
.defense-tip { padding: 12px 14px; background: var(--vp-c-brand-soft); border-radius: 8px; }
|
||||
.tip-header { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
|
||||
.defense-tip ul { margin: 0; padding-left: 18px; }
|
||||
.defense-tip li { font-size: 13px; margin: 3px 0; }
|
||||
@media (max-width: 640px) { .trap-detail { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
+156
-96
@@ -1,43 +1,80 @@
|
||||
<template>
|
||||
<div class="url-demo">
|
||||
<div class="demo-label">URL 访问流程 ── 点击逐步演示</div>
|
||||
<div class="demo-header">
|
||||
<div class="demo-title">URL 访问全流程</div>
|
||||
<button class="play-btn" @click="autoPlay" :disabled="playing">
|
||||
{{ playing ? '播放中...' : '▶ 自动演示' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flow">
|
||||
<div
|
||||
v-for="(step, index) in steps"
|
||||
:key="step.name"
|
||||
class="flow-step"
|
||||
:class="{ active: currentStep >= index }"
|
||||
@click="currentStep = index"
|
||||
>
|
||||
<div class="step-num">{{ index + 1 }}</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
<div v-if="currentStep >= index && step.detail" class="step-detail">
|
||||
{{ step.detail }}
|
||||
<div class="flow-side client-side">
|
||||
<div class="side-label">浏览器</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-steps">
|
||||
<div
|
||||
v-for="(step, i) in steps"
|
||||
:key="step.name"
|
||||
class="step"
|
||||
:class="{ active: current >= i, highlight: current === i }"
|
||||
@click="current = i"
|
||||
>
|
||||
<div class="step-line">
|
||||
<span class="step-dot"></span>
|
||||
<span v-if="i < steps.length - 1" class="step-connector"></span>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<div class="step-head">
|
||||
<span class="step-num">{{ i + 1 }}</span>
|
||||
<span class="step-name">{{ step.name }}</span>
|
||||
<span class="step-dir" :class="step.dir">{{ step.dir === 'right' ? '→' : '←' }}</span>
|
||||
</div>
|
||||
<div v-if="current >= i" class="step-detail">{{ step.detail }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tap-hint">👆 点击查看各步骤详情</div>
|
||||
<div class="flow-side server-side">
|
||||
<div class="side-label">服务器</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
const currentStep = ref(0)
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
const current = ref(-1)
|
||||
const playing = ref(false)
|
||||
let timer = null
|
||||
|
||||
const steps = [
|
||||
{ name: 'URL 解析', desc: '提取协议、域名、路径', detail: 'https://www.example.com → 协议:https, 域名:www.example.com' },
|
||||
{ name: 'DNS 解析', desc: '域名转换为 IP 地址', detail: 'www.example.com → 93.184.216.34' },
|
||||
{ name: 'TCP 连接', desc: '建立与服务器的连接', detail: '三次握手完成' },
|
||||
{ name: 'TLS 握手', desc: '建立加密通道（HTTPS）', detail: '交换密钥，验证证书' },
|
||||
{ name: '发送请求', desc: '发送 HTTP 请求', detail: 'GET /index.html HTTP/1.1' },
|
||||
{ name: '服务器处理', desc: '后端处理请求', detail: '查询数据库，返回 HTML' },
|
||||
{ name: '返回响应', desc: '接收服务器响应', detail: 'HTTP/1.1 200 OK, Content-Type: text/html' },
|
||||
{ name: '浏览器渲染', desc: '解析并显示页面', detail: '构建 DOM 树，计算样式，绘制页面' }
|
||||
{ name: 'URL 解析', dir: 'right', detail: 'https://example.com → 协议: https, 域名: example.com, 路径: /' },
|
||||
{ name: 'DNS 解析', dir: 'right', detail: '向 DNS 服务器查询，将域名翻译为 IP 地址 93.184.216.34' },
|
||||
{ name: 'TCP 三次握手', dir: 'right', detail: 'SYN → SYN-ACK → ACK，建立可靠的传输连接' },
|
||||
{ name: 'TLS 握手', dir: 'right', detail: '交换密钥、验证证书，建立 HTTPS 加密通道' },
|
||||
{ name: '发送 HTTP 请求', dir: 'right', detail: 'GET /index.html HTTP/1.1 Host: example.com' },
|
||||
{ name: '服务器处理', dir: 'left', detail: '解析请求 → 执行业务逻辑 → 查询数据库 → 组装响应' },
|
||||
{ name: '返回 HTTP 响应', dir: 'left', detail: 'HTTP/1.1 200 OK Content-Type: text/html' },
|
||||
{ name: '浏览器渲染', dir: 'left', detail: 'HTML → DOM 树 → 样式计算 → 布局 → 绘制到屏幕' }
|
||||
]
|
||||
|
||||
const autoPlay = () => {
|
||||
current.value = -1
|
||||
playing.value = true
|
||||
let i = 0
|
||||
timer = setInterval(() => {
|
||||
current.value = i
|
||||
i++
|
||||
if (i >= steps.length) {
|
||||
clearInterval(timer)
|
||||
playing.value = false
|
||||
}
|
||||
}, 800)
|
||||
}
|
||||
|
||||
onUnmounted(() => { if (timer) clearInterval(timer) })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -47,87 +84,110 @@ const steps = [
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.75rem;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.flow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 6px;
|
||||
opacity: 0.4;
|
||||
transition: all 0.3s;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.flow-step.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
background: var(--vp-c-divider);
|
||||
border-radius: 50%;
|
||||
.demo-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.flow-step.active .step-num {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-name {
|
||||
.demo-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.step-detail {
|
||||
.play-btn {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-brand);
|
||||
margin-top: 0.3rem;
|
||||
padding: 0.3rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.25rem 0.6rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-2);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.play-btn:hover:not(:disabled) { border-color: var(--vp-c-brand); }
|
||||
.play-btn:disabled { opacity: 0.5; cursor: default; }
|
||||
.flow {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.flow-side {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding-top: 0.3rem;
|
||||
}
|
||||
.side-label {
|
||||
writing-mode: vertical-rl;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-3);
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
.flow-steps { flex: 1; display: flex; flex-direction: column; }
|
||||
.step {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
opacity: 0.35;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.step.active { opacity: 1; }
|
||||
.step.highlight .step-dot { box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb, 100, 108, 255), 0.2); }
|
||||
.step-line {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.step-dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-divider);
|
||||
transition: all 0.3s;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.step.active .step-dot { background: var(--vp-c-brand); }
|
||||
.step-connector {
|
||||
flex: 1;
|
||||
width: 1px;
|
||||
background: var(--vp-c-divider);
|
||||
min-height: 0.8rem;
|
||||
}
|
||||
.step.active .step-connector { background: var(--vp-c-brand); opacity: 0.3; }
|
||||
.step-body { flex: 1; padding-bottom: 0.5rem; }
|
||||
.step-head { display: flex; align-items: center; gap: 0.35rem; }
|
||||
.step-num {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-3);
|
||||
min-width: 1rem;
|
||||
}
|
||||
.step.active .step-num { color: var(--vp-c-brand); }
|
||||
.step-name {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
.step-dir {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
.step-dir.right { color: var(--vp-c-brand); }
|
||||
.step-dir.left { color: #e879a0; }
|
||||
.step-detail {
|
||||
font-size: 0.63rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.2rem;
|
||||
padding: 0.25rem 0.4rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tap-hint {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.75rem;
|
||||
@media (max-width: 480px) {
|
||||
.flow-side { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="flow-demo">
|
||||
<div class="flow-section">
|
||||
<div class="flow-label traditional">传统开发流程</div>
|
||||
<div class="flow-steps">
|
||||
<span v-for="(step, i) in traditionalSteps" :key="step">
|
||||
<span class="flow-step">{{ step }}</span>
|
||||
<span v-if="i < traditionalSteps.length - 1" class="flow-arrow">→</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flow-loop">↑ 反复循环 ↓</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-section">
|
||||
<div class="flow-label vibe">Vibe Coding 流程</div>
|
||||
<div class="flow-steps">
|
||||
<span v-for="(step, i) in vibeSteps" :key="step">
|
||||
<span class="flow-step" :class="{ highlight: step.highlight }">{{ step.text }}</span>
|
||||
<span v-if="i < vibeSteps.length - 1" class="flow-arrow">→</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flow-loop">↑ 快速迭代 ↓</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const traditionalSteps = ['你', '学习语法', '写代码', '调试', '查文档', '修改', '运行']
|
||||
|
||||
const vibeSteps = [
|
||||
{ text: '你', highlight: false },
|
||||
{ text: '用自然语言描述需求', highlight: true },
|
||||
{ text: 'AI 生成代码', highlight: true },
|
||||
{ text: '你审核修改', highlight: false },
|
||||
{ text: '运行', highlight: false }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flow-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem 1.2rem;
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.flow-section {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.flow-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.35rem;
|
||||
border-bottom: 1px dashed var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.flow-label.traditional {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.flow-label.vibe {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.flow-step.highlight {
|
||||
background: var(--vp-c-brand-soft);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.flow-loop {
|
||||
font-size: 0.68rem;
|
||||
color: var(--vp-c-text-3);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user