feat(computer-fundamentals): add comprehensive content for computer fundamentals section
Add detailed documentation and interactive demos for computer fundamentals topics including: - Transistor to CPU architecture - Data encoding, storage and transmission - Operating system concepts (processes, memory, filesystems) - Programming language overview and paradigms - Algorithm and data structure basics Includes Vue component demos for key concepts with visualizations and interactive elements to enhance learning experience. All content is written in Chinese with markdown formatting and embedded components. The commit also updates the sidebar navigation and adds new Vue components for interactive demonstrations of key computer science concepts.
This commit is contained in:
sanbuphy
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="transmission-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">📡</span>
|
||||
<span class="title">数据传输：从串行到并行</span>
|
||||
<span class="subtitle">数据如何在不同设备间移动</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="transmission-types">
|
||||
<div class="type-card" :class="{ active: activeType === 'serial' }" @click="activeType = 'serial'">
|
||||
<div class="card-icon">➡️</div>
|
||||
<div class="card-title">串行传输</div>
|
||||
<div class="card-desc">一位一位依次传输</div>
|
||||
<div class="card-examples">USB、SATA、PCIe</div>
|
||||
</div>
|
||||
<div class="type-card" :class="{ active: activeType === 'parallel' }" @click="activeType = 'parallel'">
|
||||
<div class="card-icon">⬇️⬇️⬇️⬇️</div>
|
||||
<div class="card-title">并行传输</div>
|
||||
<div class="card-desc">多位同时传输</div>
|
||||
<div class="card-examples">旧式打印机接口、IDE</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="transmission-visual">
|
||||
<div class="visual-title">{{ activeType === 'serial' ? '串行传输示意' : '并行传输示意' }}</div>
|
||||
<div class="visual-area">
|
||||
<div class="sender">
|
||||
<div class="device-label">发送端</div>
|
||||
<div class="data-bits">
|
||||
<span v-for="(bit, i) in dataBits" :key="i" class="bit" :class="{ sending: sendingBit === i && activeType === 'serial' }">{{ bit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="channels">
|
||||
<div v-if="activeType === 'serial'" class="channel serial">
|
||||
<div class="channel-label">单通道</div>
|
||||
<div class="channel-flow">
|
||||
<span v-for="i in 5" :key="i" class="flow-dot" :class="{ active: sendingBit !== null }">●</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="channel parallel">
|
||||
<div v-for="i in 4" :key="i" class="channel-row">
|
||||
<div class="channel-label">通道{{ i }}</div>
|
||||
<div class="channel-flow">
|
||||
<span class="flow-dot active">●</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="receiver">
|
||||
<div class="device-label">接收端</div>
|
||||
<div class="data-bits received">
|
||||
<span v-for="(bit, i) in receivedBits" :key="i" class="bit">{{ bit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="send-btn" @click="startTransmission">发送数据</button>
|
||||
</div>
|
||||
|
||||
<div class="comparison-table">
|
||||
<div class="table-title">串行 vs 并行对比</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>特性</th>
|
||||
<th>串行</th>
|
||||
<th>并行</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>传输线数量</td>
|
||||
<td>少（1-几根）</td>
|
||||
<td>多（8-64根）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>抗干扰能力</td>
|
||||
<td>强</td>
|
||||
<td>弱（线间干扰）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>传输距离</td>
|
||||
<td>远</td>
|
||||
<td>近</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>现代应用</td>
|
||||
<td>主流（USB、PCIe）</td>
|
||||
<td>较少</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>现代高速传输多采用串行方式。虽然并行"看起来"更快（一次传多位），但串行可以跑更高频率，抗干扰更强，实际速度反而更快。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const activeType = ref('serial')
|
||||
const dataBits = ref(['1', '0', '1', '1', '0', '0', '1', '0'])
|
||||
const receivedBits = ref(['-', '-', '-', '-', '-', '-', '-', '-'])
|
||||
const sendingBit = ref(null)
|
||||
|
||||
const startTransmission = () => {
|
||||
if (activeType.value === 'serial') {
|
||||
receivedBits.value = ['-', '-', '-', '-', '-', '-', '-', '-']
|
||||
let i = 0
|
||||
const interval = setInterval(() => {
|
||||
if (i < dataBits.value.length) {
|
||||
sendingBit.value = i
|
||||
receivedBits.value[i] = dataBits.value[i]
|
||||
i++
|
||||
} else {
|
||||
clearInterval(interval)
|
||||
sendingBit.value = null
|
||||
}
|
||||
}, 300)
|
||||
} else {
|
||||
receivedBits.value = [...dataBits.value]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.transmission-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
|
||||
.demo-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.transmission-types {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.type-card {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.type-card.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.card-examples {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-brand);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.transmission-visual {
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.visual-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.sender, .receiver {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.device-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.data-bits {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.bit {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 2px;
|
||||
font-size: 0.75rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.bit.sending {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.channels {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.channel.serial {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.channel.parallel {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.channel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.channel-label {
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.channel-flow {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.flow-dot {
|
||||
font-size: 0.5rem;
|
||||
color: var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.flow-dot.active {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 0.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-box .icon { flex-shrink: 0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user