sanbuphy
7c70c37072
Add placeholder Vue components for visualizing technical concepts across multiple domains including frontend routing, browser rendering, cache design, queue design, database principles, API design, cloud services, and backend evolution. These components provide interactive educational content for the documentation. Update documentation structure to include new appendix sections and enhance existing content with visual components. Remove unused 'codex' dependency from package.json.
51 lines
1005 B
Vue
51 lines
1005 B
Vue
<template>
|
|
<div class="demo-container">
|
|
<div class="demo-header">
|
|
<h4>{{ title }}</h4>
|
|
<p class="hint">{{ description }}</p>
|
|
</div>
|
|
<div class="demo-content">
|
|
<el-alert type="info" :closable="false">
|
|
消息队列对比演示组件占位符 - 待实现具体交互
|
|
</el-alert>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const title = ref('消息队列对比演示')
|
|
const description = ref('对比主流消息队列产品（RabbitMQ、Kafka、RocketMQ等）的特性、适用场景和性能差异')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-container {
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
background: var(--vp-c-bg-soft);
|
|
}
|
|
|
|
.demo-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.demo-header h4 {
|
|
margin: 0 0 8px 0;
|
|
color: var(--vp-c-text-1);
|
|
}
|
|
|
|
.hint {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
|
|
.demo-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
</style>
|