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
2026-02-25 01:38:27 +08:00
parent 3af119a598
commit f44c842fe7
41 changed files with 7721 additions and 1290 deletions
@@ -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>