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
2026-02-23 01:50:43 +08:00
parent 2a0fdd3392
commit 1062e2e16f
68 changed files with 4455 additions and 3469 deletions
@@ -8,7 +8,7 @@
<div class="core-idea">
<div class="idea-box">
<div class="idea-text">
贪心算法在每一步选择中都采取当前状态下<strong>最优</strong>的选择<br>
贪心算法在每一步选择中都采取当前状态下<strong>最优</strong>的选择<br />
希望通过一系列局部最优选择达到<strong>全局最优</strong>
</div>
</div>
@@ -36,7 +36,11 @@
需要找零<span class="amount">{{ changeAmount }}</span>
</div>
<div class="change-process">
<div class="process-step" v-for="(step, index) in changeSteps" :key="index">
<div
class="process-step"
v-for="(step, index) in changeSteps"
:key="index"
>
<div class="step-coin">{{ step.coin }}</div>
<div class="step-text">× {{ step.count }} = {{ step.value }}</div>
</div>
@@ -46,7 +50,7 @@
</div>
</div>
<div class="scenario-note">
贪心策略每次选择面值最大的硬币<br>
贪心策略每次选择面值最大的硬币<br />
适用于人民币美元等货币系统
</div>
</div>
@@ -59,9 +63,14 @@
<div
v-for="(activity, index) in activities"
:key="index"
:class="['activity-item', { selected: activity.selected, conflicting: activity.conflicting }]"
:class="[
'activity-item',
{ selected: activity.selected, conflicting: activity.conflicting }
]"
>
<div class="activity-time">{{ activity.start }} - {{ activity.end }}</div>
<div class="activity-time">
{{ activity.start }} - {{ activity.end }}
</div>
<div class="activity-name">{{ activity.name }}</div>
</div>
</div>
@@ -183,17 +192,51 @@ const changeSteps = [
{ coin: '1元', count: 2, value: 2 }
]
const totalCoins = computed(() => changeSteps.reduce((sum, step) => sum + step.count, 0))
const totalCoins = computed(() =>
changeSteps.reduce((sum, step) => sum + step.count, 0)
)
const activities = [
{ start: '9:00', end: '10:00', name: '活动1', selected: true, conflicting: false },
{ start: '9:30', end: '11:30', name: '活动2', selected: false, conflicting: true },
{ start: '10:00', end: '11:00', name: '活动3', selected: true, conflicting: false },
{ start: '10:30', end: '12:00', name: '活动4', selected: false, conflicting: true },
{ start: '11:00', end: '12:00', name: '活动5', selected: true, conflicting: false }
{
start: '9:00',
end: '10:00',
name: '活动1',
selected: true,
conflicting: false
},
{
start: '9:30',
end: '11:30',
name: '活动2',
selected: false,
conflicting: true
},
{
start: '10:00',
end: '11:00',
name: '活动3',
selected: true,
conflicting: false
},
{
start: '10:30',
end: '12:00',
name: '活动4',
selected: false,
conflicting: true
},
{
start: '11:00',
end: '12:00',
name: '活动5',
selected: true,
conflicting: false
}
]
const selectedCount = computed(() => activities.filter(a => a.selected).length)
const selectedCount = computed(
() => activities.filter((a) => a.selected).length
)
</script>
<style scoped>
@@ -212,8 +255,14 @@ const selectedCount = computed(() => activities.filter(a => a.selected).length)
margin-bottom: 1.5rem;
}
.demo-header .title { font-weight: 700; font-size: 1.1rem; }
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
.demo-header .title {
font-weight: 700;
font-size: 1.1rem;
}
.demo-header .subtitle {
color: var(--vp-c-text-2);
font-size: 0.9rem;
}
.core-idea {
margin-bottom: 2rem;