sanbuphy
d35211071a
- standardize border-radius from 8px to 6px for consistent styling - adjust padding values from 1rem to 0.75rem for better visual hierarchy - remove redundant overflow-y properties for cleaner code
403 lines
8.4 KiB
Vue
403 lines
8.4 KiB
Vue
<template>
|
||
<div class="cache-hierarchy-demo">
|
||
<div class="demo-header">
|
||
<span class="icon">🏗️</span>
|
||
<span class="title">缓存层级结构</span>
|
||
<span class="subtitle">数据是如何在不同缓存层级间流动的</span>
|
||
</div>
|
||
|
||
<div class="intro-text">
|
||
想象你在<span class="highlight">超市</span>买东西：先在购物车找（L1缓存），没有就去货架上找（L2缓存），
|
||
再没有就去仓库找（L3缓存）。越往上层，速度越快但容量越小；越往下层，速度越慢但容量越大。
|
||
</div>
|
||
|
||
<div class="hierarchy-layers">
|
||
<div
|
||
v-for="(layer, index) in layers"
|
||
:key="layer.id"
|
||
class="layer"
|
||
:class="{ active: activeLayer === layer.id }"
|
||
@click="activeLayer = layer.id"
|
||
>
|
||
<div class="layer-header">
|
||
<span class="layer-icon">{{ layer.icon }}</span>
|
||
<span class="layer-name">{{ layer.name }}</span>
|
||
</div>
|
||
<div class="layer-stats">
|
||
<div class="stat">
|
||
<span class="stat-label">速度</span>
|
||
<span class="stat-value" :class="layer.speedClass">{{ layer.speed }}</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">容量</span>
|
||
<span class="stat-value">{{ layer.capacity }}</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">成本</span>
|
||
<span class="stat-value">{{ layer.cost }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-if="index < layers.length - 1" class="arrow">↓</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="data-flow">
|
||
<div class="flow-title">数据流动演示</div>
|
||
<div class="flow-steps">
|
||
<div class="flow-step" :class="{ active: flowStep >= 1 }">
|
||
<div class="step-number">1</div>
|
||
<div class="step-text">查询 L1 缓存</div>
|
||
<div class="step-time">~1ns</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-step" :class="{ active: flowStep >= 2 }">
|
||
<div class="step-number">2</div>
|
||
<div class="step-text">未命中，查 L2</div>
|
||
<div class="step-time">~10ns</div>
|
||
</div>
|
||
<div class="flow-arrow">↓</div>
|
||
<div class="flow-step" :class="{ active: flowStep >= 3 }">
|
||
<div class="step-number">3</div>
|
||
<div class="step-text">未命中，查 L3</div>
|
||
<div class="step-time">~100ns</div>
|
||
</div>
|
||
</div>
|
||
<button class="simulate-btn" @click="simulateFlow">模拟数据查找</button>
|
||
</div>
|
||
|
||
<div class="comparison-table">
|
||
<div class="table-title">各层级对比</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>层级</th>
|
||
<th>速度</th>
|
||
<th>容量</th>
|
||
<th>成本</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="layer in layers" :key="layer.id" :class="{ active: activeLayer === layer.id }">
|
||
<td>{{ layer.name }}</td>
|
||
<td>{{ layer.speed }}</td>
|
||
<td>{{ layer.capacity }}</td>
|
||
<td>{{ layer.cost }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<span class="icon">💡</span>
|
||
<strong>核心思想：</strong>多级缓存利用<span class="highlight">局部性原理</span>——程序倾向于访问最近访问过的数据位置。通过把热点数据放在最快的层级，大幅提升访问速度。
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
const activeLayer = ref('l1')
|
||
const flowStep = ref(0)
|
||
|
||
const layers = [
|
||
{
|
||
id: 'l1',
|
||
name: 'L1 缓存',
|
||
icon: '⚡',
|
||
speed: '~1ns',
|
||
capacity: '~64KB',
|
||
cost: '极高',
|
||
speedClass: 'fast'
|
||
},
|
||
{
|
||
id: 'l2',
|
||
name: 'L2 缓存',
|
||
icon: '🚀',
|
||
speed: '~10ns',
|
||
capacity: '~256KB',
|
||
cost: '高',
|
||
speedClass: 'medium'
|
||
},
|
||
{
|
||
id: 'l3',
|
||
name: 'L3 缓存',
|
||
icon: '📦',
|
||
speed: '~100ns',
|
||
capacity: '~8MB',
|
||
cost: '中',
|
||
speedClass: 'slow'
|
||
}
|
||
]
|
||
|
||
const simulateFlow = () => {
|
||
flowStep.value = 0
|
||
setTimeout(() => { flowStep.value = 1 }, 300)
|
||
setTimeout(() => { flowStep.value = 2 }, 800)
|
||
setTimeout(() => { flowStep.value = 3 }, 1300)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.cache-hierarchy-demo {
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 6px;
|
||
background: var(--vp-c-bg-soft);
|
||
padding: 0.75rem;
|
||
margin: 0.5rem 0;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.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; }
|
||
|
||
.intro-text {
|
||
font-size: 0.9rem;
|
||
color: var(--vp-c-text-2);
|
||
line-height: 1.6;
|
||
margin-bottom: 1rem;
|
||
padding: 0.75rem;
|
||
background: var(--vp-c-bg);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.intro-text .highlight {
|
||
color: var(--vp-c-brand-1);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hierarchy-layers {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.layer {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
background: var(--vp-c-bg);
|
||
border: 2px solid var(--vp-c-divider);
|
||
border-radius: 6px;
|
||
padding: 0.75rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.layer:hover {
|
||
border-color: var(--vp-c-brand);
|
||
}
|
||
|
||
.layer.active {
|
||
border-color: var(--vp-c-brand);
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||
}
|
||
|
||
.layer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.layer-icon {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.layer-name {
|
||
font-weight: 600;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.layer-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-label {
|
||
display: block;
|
||
font-size: 0.75rem;
|
||
color: var(--vp-c-text-2);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.stat-value {
|
||
display: block;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.stat-value.fast {
|
||
color: #22c55e;
|
||
}
|
||
|
||
.stat-value.medium {
|
||
color: #f59e0b;
|
||
}
|
||
|
||
.stat-value.slow {
|
||
color: #ef4444;
|
||
}
|
||
|
||
.arrow {
|
||
text-align: center;
|
||
font-size: 1.5rem;
|
||
color: var(--vp-c-text-2);
|
||
margin: 0.25rem 0;
|
||
}
|
||
|
||
.data-flow {
|
||
background: var(--vp-c-bg);
|
||
border-radius: 6px;
|
||
padding: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
border: 1px solid var(--vp-c-divider);
|
||
}
|
||
|
||
.flow-title {
|
||
font-weight: 600;
|
||
margin-bottom: 0.75rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.flow-steps {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.flow-step {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
padding: 0.75rem 1rem;
|
||
background: var(--vp-c-bg-soft);
|
||
border-radius: 6px;
|
||
border: 2px solid var(--vp-c-divider);
|
||
transition: all 0.3s;
|
||
width: 100%;
|
||
max-width: 350px;
|
||
}
|
||
|
||
.flow-step.active {
|
||
border-color: var(--vp-c-brand);
|
||
background: #eff6ff;
|
||
}
|
||
|
||
.step-number {
|
||
width: 28px;
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--vp-c-brand);
|
||
color: white;
|
||
border-radius: 50%;
|
||
font-weight: 700;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.step-text {
|
||
flex: 1;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.step-time {
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.flow-arrow {
|
||
font-size: 1.2rem;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.simulate-btn {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
background: var(--vp-c-brand);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.simulate-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.comparison-table {
|
||
background: var(--vp-c-bg);
|
||
border-radius: 6px;
|
||
padding: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
border: 1px solid var(--vp-c-divider);
|
||
}
|
||
|
||
.table-title {
|
||
font-weight: 600;
|
||
margin-bottom: 0.75rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
th, td {
|
||
padding: 0.5rem;
|
||
text-align: left;
|
||
border: 1px solid var(--vp-c-divider);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
th {
|
||
background: var(--vp-c-bg-soft);
|
||
font-weight: 600;
|
||
}
|
||
|
||
tr.active {
|
||
background: #eff6ff;
|
||
}
|
||
|
||
.info-box {
|
||
background: var(--vp-c-bg-alt);
|
||
padding: 0.75rem;
|
||
border-radius: 6px;
|
||
font-size: 0.85rem;
|
||
line-height: 1.4;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.info-box .icon {
|
||
margin-right: 0.25rem;
|
||
}
|
||
|
||
.info-box .highlight {
|
||
color: var(--vp-c-brand-1);
|
||
font-weight: 500;
|
||
}
|
||
</style>
|