refactor: 重构 api-intro、api-design、transistor-to-cpu 组件为紧凑布局
- 重构 api-intro 7 个 Vue 组件为更紧凑的左右布局 - 重构 api-design 相关组件 - 重构 transistor-to-cpu 相关组件 - 统一使用 demo-root -> demo-header -> demo-layout -> info-box 结构 - 扩写文章内容为 MIT 讲义风格
This commit is contained in:
sanbuphy
+70
-156
@@ -7,8 +7,8 @@
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="structure-tabs">
|
||||
<button
|
||||
v-for="s in structures"
|
||||
<button
|
||||
v-for="s in structures"
|
||||
:key="s.name"
|
||||
:class="['tab-btn', { active: activeStructure === s.name }]"
|
||||
@click="activeStructure = s.name"
|
||||
@@ -24,16 +24,9 @@
|
||||
</div>
|
||||
|
||||
<div class="visual-content">
|
||||
<div
|
||||
v-if="activeStructure === '数组'"
|
||||
class="array-visual"
|
||||
>
|
||||
<div v-if="activeStructure === '数组'" class="array-visual">
|
||||
<div class="array-container">
|
||||
<div
|
||||
v-for="(item, i) in arrayData"
|
||||
:key="i"
|
||||
class="array-item"
|
||||
>
|
||||
<div v-for="(item, i) in arrayData" :key="i" class="array-item">
|
||||
<span class="index">{{ i }}</span>
|
||||
<span class="value">{{ item }}</span>
|
||||
</div>
|
||||
@@ -43,21 +36,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeStructure === '链表'"
|
||||
class="linked-visual"
|
||||
>
|
||||
<div v-else-if="activeStructure === '链表'" class="linked-visual">
|
||||
<div class="linked-container">
|
||||
<div
|
||||
v-for="(item, i) in linkedData"
|
||||
:key="i"
|
||||
class="linked-node"
|
||||
>
|
||||
<div v-for="(item, i) in linkedData" :key="i" class="linked-node">
|
||||
<span class="node-value">{{ item.value }}</span>
|
||||
<span
|
||||
v-if="i < linkedData.length - 1"
|
||||
class="node-arrow"
|
||||
>→</span>
|
||||
<span v-if="i < linkedData.length - 1" class="node-arrow"
|
||||
>→</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation-hint">
|
||||
@@ -65,104 +50,53 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeStructure === '栈'"
|
||||
class="stack-visual"
|
||||
>
|
||||
<div v-else-if="activeStructure === '栈'" class="stack-visual">
|
||||
<div class="stack-container">
|
||||
<div
|
||||
v-for="(item, i) in stackData"
|
||||
:key="i"
|
||||
class="stack-item"
|
||||
>
|
||||
<div v-for="(item, i) in stackData" :key="i" class="stack-item">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="stack-bottom">
|
||||
栈底
|
||||
</div>
|
||||
<div class="stack-bottom">栈底</div>
|
||||
</div>
|
||||
<div class="stack-ops">
|
||||
<button
|
||||
class="op-btn"
|
||||
@click="pushStack"
|
||||
>
|
||||
入栈 Push
|
||||
</button>
|
||||
<button
|
||||
class="op-btn"
|
||||
@click="popStack"
|
||||
>
|
||||
出栈 Pop
|
||||
</button>
|
||||
</div>
|
||||
<div class="operation-hint">
|
||||
后进先出 (LIFO)，操作都是 O(1)
|
||||
<button class="op-btn" @click="pushStack">入栈 Push</button>
|
||||
<button class="op-btn" @click="popStack">出栈 Pop</button>
|
||||
</div>
|
||||
<div class="operation-hint">后进先出 (LIFO)，操作都是 O(1)</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeStructure === '队列'"
|
||||
class="queue-visual"
|
||||
>
|
||||
<div v-else-if="activeStructure === '队列'" class="queue-visual">
|
||||
<div class="queue-container">
|
||||
<span class="queue-label">出 ←</span>
|
||||
<div
|
||||
v-for="(item, i) in queueData"
|
||||
:key="i"
|
||||
class="queue-item"
|
||||
>
|
||||
<div v-for="(item, i) in queueData" :key="i" class="queue-item">
|
||||
{{ item }}
|
||||
</div>
|
||||
<span class="queue-label">← 入</span>
|
||||
</div>
|
||||
<div class="queue-ops">
|
||||
<button
|
||||
class="op-btn"
|
||||
@click="enqueue"
|
||||
>
|
||||
入队
|
||||
</button>
|
||||
<button
|
||||
class="op-btn"
|
||||
@click="dequeue"
|
||||
>
|
||||
出队
|
||||
</button>
|
||||
</div>
|
||||
<div class="operation-hint">
|
||||
先进先出 (FIFO)，操作都是 O(1)
|
||||
<button class="op-btn" @click="enqueue">入队</button>
|
||||
<button class="op-btn" @click="dequeue">出队</button>
|
||||
</div>
|
||||
<div class="operation-hint">先进先出 (FIFO)，操作都是 O(1)</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeStructure === '哈希表'"
|
||||
class="hash-visual"
|
||||
>
|
||||
<div v-else-if="activeStructure === '哈希表'" class="hash-visual">
|
||||
<div class="hash-container">
|
||||
<div
|
||||
v-for="(bucket, i) in hashData"
|
||||
:key="i"
|
||||
class="hash-bucket"
|
||||
>
|
||||
<div v-for="(bucket, i) in hashData" :key="i" class="hash-bucket">
|
||||
<span class="bucket-index">{{ i }}</span>
|
||||
<div class="bucket-items">
|
||||
<span
|
||||
v-for="(item, j) in bucket"
|
||||
:key="j"
|
||||
class="bucket-item"
|
||||
>{{ item }}</span>
|
||||
>{{ item }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation-hint">
|
||||
查找/插入/删除平均 O(1)，最坏 O(n)
|
||||
</div>
|
||||
<div class="operation-hint">查找/插入/删除平均 O(1)，最坏 O(n)</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="activeStructure === '树'"
|
||||
class="tree-visual"
|
||||
>
|
||||
<div v-else-if="activeStructure === '树'" class="tree-visual">
|
||||
<div class="tree-container">
|
||||
<div class="tree-level">
|
||||
<div class="tree-node root">
|
||||
@@ -192,17 +126,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation-hint">
|
||||
查找/插入/删除 O(log n)，遍历 O(n)
|
||||
</div>
|
||||
<div class="operation-hint">查找/插入/删除 O(log n)，遍历 O(n)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="complexity-table">
|
||||
<div class="table-title">
|
||||
时间复杂度对比
|
||||
</div>
|
||||
<div class="table-title">时间复杂度对比</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -216,63 +146,31 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>访问</td>
|
||||
<td class="good">
|
||||
O(1)
|
||||
</td>
|
||||
<td class="bad">
|
||||
O(n)
|
||||
</td>
|
||||
<td class="good">
|
||||
O(1)
|
||||
</td>
|
||||
<td class="mid">
|
||||
O(log n)
|
||||
</td>
|
||||
<td class="good">O(1)</td>
|
||||
<td class="bad">O(n)</td>
|
||||
<td class="good">O(1)</td>
|
||||
<td class="mid">O(log n)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>查找</td>
|
||||
<td class="bad">
|
||||
O(n)
|
||||
</td>
|
||||
<td class="bad">
|
||||
O(n)
|
||||
</td>
|
||||
<td class="good">
|
||||
O(1)
|
||||
</td>
|
||||
<td class="mid">
|
||||
O(log n)
|
||||
</td>
|
||||
<td class="bad">O(n)</td>
|
||||
<td class="bad">O(n)</td>
|
||||
<td class="good">O(1)</td>
|
||||
<td class="mid">O(log n)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>插入</td>
|
||||
<td class="bad">
|
||||
O(n)
|
||||
</td>
|
||||
<td class="good">
|
||||
O(1)
|
||||
</td>
|
||||
<td class="good">
|
||||
O(1)
|
||||
</td>
|
||||
<td class="mid">
|
||||
O(log n)
|
||||
</td>
|
||||
<td class="bad">O(n)</td>
|
||||
<td class="good">O(1)</td>
|
||||
<td class="good">O(1)</td>
|
||||
<td class="mid">O(log n)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>删除</td>
|
||||
<td class="bad">
|
||||
O(n)
|
||||
</td>
|
||||
<td class="good">
|
||||
O(1)
|
||||
</td>
|
||||
<td class="good">
|
||||
O(1)
|
||||
</td>
|
||||
<td class="mid">
|
||||
O(log n)
|
||||
</td>
|
||||
<td class="bad">O(n)</td>
|
||||
<td class="good">O(1)</td>
|
||||
<td class="good">O(1)</td>
|
||||
<td class="mid">O(log n)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -280,7 +178,8 @@
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>核心思想：</strong>数据结构是数据的"容器"，不同的容器有不同的特点。选择合适的数据结构，能让程序效率提升几个数量级。
|
||||
<strong>核心思想：</strong
|
||||
>数据结构是数据的"容器"，不同的容器有不同的特点。选择合适的数据结构，能让程序效率提升几个数量级。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -300,7 +199,7 @@ const structures = [
|
||||
]
|
||||
|
||||
const currentStructure = computed(() => {
|
||||
return structures.find(s => s.name === activeStructure.value)
|
||||
return structures.find((s) => s.name === activeStructure.value)
|
||||
})
|
||||
|
||||
const arrayData = ref([10, 20, 30, 40, 50, 60, 70, 80])
|
||||
@@ -382,8 +281,15 @@ const treeData = ref({
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.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-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;
|
||||
}
|
||||
|
||||
.structure-tabs {
|
||||
display: flex;
|
||||
@@ -500,7 +406,8 @@ const treeData = ref({
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.stack-ops, .queue-ops {
|
||||
.stack-ops,
|
||||
.queue-ops {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
@@ -626,7 +533,8 @@ table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 0.35rem;
|
||||
text-align: center;
|
||||
@@ -636,9 +544,16 @@ th {
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.good { color: var(--vp-c-success); font-weight: bold; }
|
||||
.mid { color: var(--vp-c-warning); }
|
||||
.bad { color: var(--vp-c-danger); }
|
||||
.good {
|
||||
color: var(--vp-c-success);
|
||||
font-weight: bold;
|
||||
}
|
||||
.mid {
|
||||
color: var(--vp-c-warning);
|
||||
}
|
||||
.bad {
|
||||
color: var(--vp-c-danger);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
@@ -650,5 +565,4 @@ th {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user