delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新附录文档及对应交互组件

Browse Source
This commit is contained in:
sanbuphy
2026-02-23 12:09:47 +08:00
parent 1062e2e16f
commit 6e13832d97
29 changed files with 13338 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/computer-fundamentals/HalfAdderDemo.vue
+176 -53
View File
@@ -1,12 +1,22 @@
<template>
<div class="half-adder-demo">
<div class="demo-label">
半加器 (Half Adder) 内部构造 ── 尝试组合 A 和 B，观察 XOR（异或门）和
AND（与门）的分工
<div class="demo-header">
<span class="title">半加器 (Half Adder)</span>
<span class="subtitle">最基础的二进制加法单元 ── 只能处理两个 1 位输入</span>
</div>
<div class="terms-box">
<div class="term-item">
<span class="term-name">本位 (Sum)</span>
<span class="term-desc">当前位的计算结果，不考虑外部进位</span>
</div>
<div class="term-item">
<span class="term-name">进位 (Carry)</span>
<span class="term-desc">当两位都是 1 时，向更高位"借位"</span>
</div>
</div>
<div class="circuit-container">
<!-- 输入端 -->
<div class="inputs">
<div class="input-line">
<button
@@ -30,41 +40,32 @@
</div>
</div>
<!-- 连线区域 -->
<div class="wires">
<!-- Path visualization can be complex, using simple SVG lines -->
<svg class="wire-svg" viewBox="0 0 100 150" preserveAspectRatio="none">
<!-- A to XOR -->
<path
d="M 0,30 C 50,30 50,40 100,40"
fill="none"
:stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
stroke-width="2"
/>
<!-- B to XOR -->
<path
d="M 0,120 C 50,120 50,60 100,60"
fill="none"
:stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
stroke-width="2"
/>
<!-- A to AND -->
<path
d="M 20,30 L 20,90 C 20,90 50,90 100,90"
fill="none"
:stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
stroke-width="2"
/>
<!-- B to AND -->
<path
d="M 40,120 L 40,110 C 40,110 50,110 100,110"
fill="none"
:stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
stroke-width="2"
/>
<!-- Nodes -->
<circle
cx="20"
cy="30"
@@ -80,19 +81,25 @@
</svg>
</div>
<!-- 逻辑门 -->
<div class="gates">
<div class="gate-box xor-gate" :class="{ active: sumOut }">
<div class="gate-name">XOR 门</div>
<div class="gate-desc">计算"本位" (相加结果)</div>
<div class="gate-header">
<span class="gate-name">XOR</span>
<span class="gate-cn">异或门</span>
</div>
<div class="gate-formula">A ⊕ B</div>
<div class="gate-desc">不同为 1 → 本位</div>
</div>
<div class="gate-box and-gate" :class="{ active: carryOut }">
<div class="gate-name">AND 门</div>
<div class="gate-desc">计算"进位" (满2进1)</div>
<div class="gate-header">
<span class="gate-name">AND</span>
<span class="gate-cn">与门</span>
</div>
<div class="gate-formula">A ∧ B</div>
<div class="gate-desc">全 1 为 1 → 进位</div>
</div>
</div>
<!-- 线 -->
<div class="wires outputs-wires">
<svg class="wire-svg" viewBox="0 0 50 150" preserveAspectRatio="none">
<line
@@ -116,33 +123,44 @@
</svg>
</div>
<!-- 输出端 -->
<div class="outputs">
<div class="output-line" :class="{ active: sumOut }">
<span class="label">本位 (Sum)</span>
<span class="out-val s-val">{{ sumOut ? '1' : '0' }}</span>
</div>
<div class="output-line" :class="{ active: carryOut }">
<span class="label">向前进位 (Carry)</span>
<span class="label">进位 (Carry)</span>
<span class="out-val c-val">{{ carryOut ? '1' : '0' }}</span>
</div>
</div>
</div>
<div class="logic-explain">
<p>
你的输入是 {{ inputA ? '1' : '0' }} 和 {{ inputB ? '1' : '0' }}。<br />
<strong>XOR 门</strong>判断它们不仅要"相加"，还看是否"不同"：{{
inputA !== inputB ? '不同，出1' : '相同，出0'
}}
——> 核心本位 <strong>{{ sumOut ? '1' : '0' }}</strong
>。<br />
<strong>AND 门</strong>暗中观察是否"全为真"：{{
inputA && inputB ? '全为 1，产生进位！' : '没有全为 1，不进位'
}}
——> 进位信号 <strong>{{ carryOut ? '1' : '0' }}</strong
>。
</p>
<div class="calculation-box">
<div class="calc-title">计算过程</div>
<div class="calc-content">
<div class="calc-row">
<span class="calc-label">输入：</span>
<span class="calc-value">A = {{ inputA ? '1' : '0' }}，B = {{ inputB ? '1' : '0' }}</span>
</div>
<div class="calc-row">
<span class="calc-label">本位：</span>
<span class="calc-formula">A ⊕ B = {{ inputA ? '1' : '0' }} ⊕ {{ inputB ? '1' : '0' }} =
<strong>{{ sumOut ? '1' : '0' }}</strong></span>
<span class="calc-reason">（{{ inputA !== inputB ? '不同' : '相同' }}）</span>
</div>
<div class="calc-row">
<span class="calc-label">进位：</span>
<span class="calc-formula">A ∧ B = {{ inputA ? '1' : '0' }} ∧ {{ inputB ? '1' : '0' }} =
<strong>{{ carryOut ? '1' : '0' }}</strong></span>
<span class="calc-reason">（{{ inputA && inputB ? '全为 1' : '不全为 1' }}）</span>
</div>
</div>
</div>
<div class="info-box">
<strong>核心思想：</strong>
半加器用 XOR 算"本位和"，用 AND
算"进位"。它是最小的加法单元，但无法处理来自低位的进位。
</div>
</div>
</template>
@@ -166,12 +184,50 @@ const carryOut = computed(() => inputA.value && inputB.value)
margin: 1rem 0;
}
.demo-label {
font-size: 0.78rem;
.demo-header {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-bottom: 0.75rem;
}
.title {
font-size: 0.9rem;
font-weight: bold;
color: var(--vp-c-text-2);
margin-bottom: 1rem;
letter-spacing: 0.2px;
color: var(--vp-c-text-1);
}
.subtitle {
font-size: 0.75rem;
color: var(--vp-c-text-3);
}
.terms-box {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.5rem;
background: var(--vp-c-bg-alt);
border-radius: 6px;
}
.term-item {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.term-name {
font-size: 0.78rem;
font-weight: 600;
color: var(--vp-c-brand-1);
}
.term-desc {
font-size: 0.68rem;
color: var(--vp-c-text-3);
line-height: 1.3;
}
.circuit-container {
@@ -240,12 +296,6 @@ const carryOut = computed(() => inputA.value && inputB.value)
font-size: 1rem;
transition: all 0.2s;
}
.s-val {
color: var(--vp-c-text-3);
}
.c-val {
color: var(--vp-c-text-3);
}
.output-line.active .s-val {
background: #dcfce7;
@@ -300,27 +350,97 @@ const carryOut = computed(() => inputA.value && inputB.value)
box-shadow: 0 0 8px var(--vp-c-brand-soft);
}
.gate-header {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.gate-name {
font-weight: bold;
font-size: 0.9rem;
color: var(--vp-c-text-1);
}
.gate-cn {
font-size: 0.7rem;
color: var(--vp-c-text-3);
}
.gate-formula {
font-size: 0.75rem;
color: var(--vp-c-brand-1);
font-family: 'JetBrains Mono', monospace;
}
.gate-desc {
font-size: 0.65rem;
color: var(--vp-c-text-3);
margin-top: 0.2rem;
margin-top: 0.15rem;
}
.logic-explain {
margin-top: 1.5rem;
padding: 0.8rem;
.calculation-box {
margin-top: 1rem;
padding: 0.6rem 0.8rem;
background: var(--vp-c-bg);
border-radius: 6px;
font-size: 0.85rem;
text-align: center;
}
.calc-title {
font-size: 0.75rem;
font-weight: 600;
color: var(--vp-c-text-2);
line-height: 1.5;
margin-bottom: 0.4rem;
}
.calc-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.calc-row {
display: flex;
align-items: baseline;
gap: 0.3rem;
font-size: 0.78rem;
}
.calc-label {
color: var(--vp-c-text-3);
min-width: 3.5rem;
}
.calc-formula {
font-family: 'JetBrains Mono', monospace;
color: var(--vp-c-text-1);
}
.calc-formula strong {
color: var(--vp-c-brand-1);
}
.calc-reason {
color: var(--vp-c-text-3);
font-size: 0.72rem;
}
.info-box {
display: flex;
gap: 0.25rem;
margin-top: 0.75rem;
padding: 0.6rem 0.8rem;
background: var(--vp-c-bg-alt);
border-radius: 6px;
font-size: 0.8rem;
color: var(--vp-c-text-2);
line-height: 1.4;
}
.info-box strong {
white-space: nowrap;
flex-shrink: 0;
color: var(--vp-c-text-1);
}
@media (max-width: 600px) {
@@ -329,5 +449,8 @@ const carryOut = computed(() => inputA.value && inputB.value)
transform-origin: left top;
padding-bottom: 0;
}
.terms-box {
flex-direction: column;
}
}
</style>