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/LogicGateDemo.vue
+152 -43
View File
@@ -1,36 +1,54 @@
<template>
<div class="logic-gate-demo">
<div class="demo-label">四种基本逻辑门 ── 真值表一览</div>
<div class="demo-header">
<span class="title">四种基本逻辑门</span>
<span class="subtitle">所有数字计算的基础积木</span>
</div>
<div class="gates-grid">
<div v-for="gate in gates" :key="gate.name" class="gate-card">
<div class="gate-name">{{ gate.name }}</div>
<div class="gate-header">
<span class="gate-name-en">{{ gate.name }}</span>
<span class="gate-name-cn">{{ gate.nameCn }}</span>
</div>
<div class="gate-formula">
<span class="formula-label">运算：</span>
<code class="formula-code">{{ gate.formula }}</code>
</div>
<div class="gate-rule">{{ gate.rule }}</div>
<table class="mini-truth">
<thead>
<tr>
<th>A</th>
<th v-if="gate.name !== 'NOT'">B</th>
<th>结果</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in gate.rows" :key="i">
<td>{{ row[0] }}</td>
<td v-if="gate.name !== 'NOT'">{{ row[1] }}</td>
<td
class="result-cell"
:class="{ one: row[row.length - 1] === 1 }"
>
{{ row[row.length - 1] }}
</td>
</tr>
</tbody>
</table>
<div class="gate-intuition">{{ gate.intuition }}</div>
<div class="truth-section">
<div class="truth-title">真值表</div>
<table class="mini-truth">
<thead>
<tr>
<th>A</th>
<th v-if="gate.name !== 'NOT'">B</th>
<th>输出</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in gate.rows" :key="i">
<td>{{ row[0] }}</td>
<td v-if="gate.name !== 'NOT'">{{ row[1] }}</td>
<td
class="result-cell"
:class="{ one: row[row.length - 1] === 1 }"
>
{{ row[row.length - 1] }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="demo-caption">所有数字计算都由这四种门的组合实现</div>
<div class="info-box">
<strong>核心思想：</strong>
逻辑门把物理电路的"通/断"变成了数学上的"真/假"运算，是硬件实现软件逻辑的桥梁。
</div>
</div>
</template>
@@ -38,7 +56,10 @@
const gates = [
{
name: 'AND',
rule: '都为 1 才得 1',
nameCn: '与门',
formula: 'A ∧ B',
rule: '两个都为 1，才输出 1',
intuition: '串联开关：两道门都开才通',
rows: [
[0, 0, 0],
[0, 1, 0],
@@ -48,7 +69,10 @@ const gates = [
},
{
name: 'OR',
rule: '有一个 1 就得 1',
nameCn: '或门',
formula: 'A ∨ B',
rule: '有一个为 1，就输出 1',
intuition: '并联开关：任一道门开就通',
rows: [
[0, 0, 0],
[0, 1, 1],
@@ -58,7 +82,10 @@ const gates = [
},
{
name: 'NOT',
rule: '取反',
nameCn: '非门',
formula: '¬A',
rule: '输入取反：0 变 1，1 变 0',
intuition: '反向器：开变关，关变开',
rows: [
[0, 1],
[1, 0]
@@ -66,7 +93,10 @@ const gates = [
},
{
name: 'XOR',
rule: '不同才得 1',
nameCn: '异或门',
formula: 'A ⊕ B',
rule: '两个不同，才输出 1',
intuition: '差异检测器：相异为真',
rows: [
[0, 0, 0],
[0, 1, 1],
@@ -86,12 +116,22 @@ const gates = [
margin: 1rem 0;
}
.demo-label {
font-size: 0.78rem;
font-weight: bold;
color: var(--vp-c-text-2);
.demo-header {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-bottom: 0.75rem;
letter-spacing: 0.2px;
}
.title {
font-size: 0.9rem;
font-weight: bold;
color: var(--vp-c-text-1);
}
.subtitle {
font-size: 0.75rem;
color: var(--vp-c-text-3);
}
.gates-grid {
@@ -108,23 +148,80 @@ const gates = [
text-align: center;
}
.gate-name {
.gate-header {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.3rem;
margin-bottom: 0.3rem;
}
.gate-name-en {
font-weight: bold;
font-size: 0.9rem;
font-size: 1rem;
color: var(--vp-c-brand-1);
margin-bottom: 0.15rem;
}
.gate-name-cn {
font-size: 0.75rem;
color: var(--vp-c-text-2);
font-weight: 500;
}
.gate-formula {
display: flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
margin-bottom: 0.25rem;
}
.formula-label {
font-size: 0.65rem;
color: var(--vp-c-text-3);
}
.formula-code {
font-size: 0.8rem;
padding: 0.1rem 0.3rem;
background: var(--vp-c-bg-alt);
border-radius: 3px;
color: var(--vp-c-brand-1);
font-family: 'JetBrains Mono', monospace;
}
.gate-rule {
font-size: 0.72rem;
color: var(--vp-c-text-2);
margin-bottom: 0.2rem;
font-weight: 500;
}
.gate-intuition {
font-size: 0.68rem;
color: var(--vp-c-text-3);
margin-bottom: 0.5rem;
padding: 0.2rem 0.4rem;
background: var(--vp-c-bg-alt);
border-radius: 4px;
}
.truth-section {
margin-top: 0.3rem;
}
.truth-title {
font-size: 0.6rem;
color: var(--vp-c-text-3);
margin-bottom: 0.2rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mini-truth {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
font-size: 0.78rem;
font-variant-numeric: tabular-nums;
}
@@ -137,7 +234,7 @@ const gates = [
.mini-truth th {
background: var(--vp-c-bg-alt);
font-size: 0.72rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--vp-c-text-2);
}
@@ -145,13 +242,25 @@ const gates = [
.result-cell.one {
color: var(--vp-c-brand-1);
font-weight: bold;
background: var(--vp-c-brand-soft);
}
.demo-caption {
font-size: 0.72rem;
color: var(--vp-c-text-3);
margin-top: 0.6rem;
text-align: center;
.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) {