test-repo/docs/.vitepress/theme/components/appendix/queue-design/MessageQueueComparisonDemo.vue

<!--
  MessageQueueComparisonDemo.vue
  主流消息队列对比交互演示
-->
<template>
  <div class="mq-comparison-demo">
    <div class="header">
      <div class="title">
        主流消息队列对比
      </div>
      <div class="subtitle">
        选择不同 MQ，查看特性对比和适用场景
      </div>
    </div>

    <div class="mq-selector">
      <button
        v-for="mq in messageQueues"
        :key="mq.name"
        class="mq-btn"
        :class="{ active: selectedMQ === mq.name }"
        @click="selectMQ(mq.name)"
      >
        {{ mq.label }}
      </button>
    </div>

    <div class="mq-details">
      <div class="mq-card">
        <div class="mq-header">
          <div class="mq-name">
            {{ currentMQ.label }}
          </div>
          <div class="mq-tag">
            {{ currentMQ.positioning }}
          </div>
        </div>

        <div class="metrics-grid">
          <div class="metric">
            <div class="metric-label">
              吞吐量
            </div>
            <div class="metric-value">
              {{ currentMQ.throughput }}
            </div>
            <div class="metric-bar">
              <div
                class="bar-fill"
                :style="{ width: currentMQ.throughputPercent + '%' }"
              />
            </div>
          </div>

          <div class="metric">
            <div class="metric-label">
              延迟
            </div>
            <div class="metric-value">
              {{ currentMQ.latency }}
            </div>
            <div class="metric-desc">
              {{ currentMQ.latencyDesc }}
            </div>
          </div>

          <div class="metric">
            <div class="metric-label">
              可靠性
            </div>
            <div class="metric-value">
              {{ currentMQ.reliability }}
            </div>
            <div class="metric-desc">
              {{ currentMQ.reliabilityDesc }}
            </div>
          </div>

          <div class="metric">
            <div class="metric-label">
              学习曲线
            </div>
            <div class="metric-value">
              {{ currentMQ.learning }}
            </div>
            <div class="metric-bar">
              <div
                class="bar-fill learning"
                :style="{ width: currentMQ.learningPercent + '%' }"
              />
            </div>
          </div>
        </div>

        <div class="features">
          <div class="feature-title">
            核心特性
          </div>
          <div class="feature-list">
            <div
              v-for="feature in currentMQ.features"
              :key="feature"
              class="feature-item"
            >
              ✓ {{ feature }}
            </div>
          </div>
        </div>

        <div class="use-cases">
          <div class="use-case-title">
            ✅ 适用场景
          </div>
          <ul class="use-case-list">
            <li
              v-for="useCase in currentMQ.useCases"
              :key="useCase"
            >
              {{ useCase }}
            </li>
          </ul>
        </div>

        <div class="not-recommended">
          <div class="not-title">
            ⚠️ 不推荐场景
          </div>
          <ul class="not-list">
            <li
              v-for="item in currentMQ.notRecommended"
              :key="item"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="comparison-table">
      <div class="table-title">
        快速对比表
      </div>
      <table>
        <thead>
          <tr>
            <th>特性</th>
            <th
              v-for="mq in messageQueues"
              :key="mq.name"
              :class="{ highlight: mq.name === selectedMQ }"
            >
              {{ mq.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>吞吐量</td>
            <td
              v-for="mq in messageQueues"
              :key="mq.name"
              :class="{ highlight: mq.name === selectedMQ }"
            >
              {{ mq.throughput }}
            </td>
          </tr>
          <tr>
            <td>延迟</td>
            <td
              v-for="mq in messageQueues"
              :key="mq.name"
              :class="{ highlight: mq.name === selectedMQ }"
            >
              {{ mq.latency }}
            </td>
          </tr>
          <tr>
            <td>消息顺序</td>
            <td
              v-for="mq in messageQueues"
              :key="mq.name"
              :class="{ highlight: mq.name === selectedMQ }"
            >
              {{ mq.ordering }}
            </td>
          </tr>
          <tr>
            <td>消息回溯</td>
            <td
              v-for="mq in messageQueues"
              :key="mq.name"
              :class="{ highlight: mq.name === selectedMQ }"
            >
              {{ mq.rewind }}
            </td>
          </tr>
          <tr>
            <td>最佳场景</td>
            <td
              v-for="mq in messageQueues"
              :key="mq.name"
              :class="{ highlight: mq.name === selectedMQ }"
            >
              {{ mq.bestScenario }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="recommendation">
      <div class="rec-title">
        💡 选择建议
      </div>
      <div class="rec-content">
        <div
          v-if="selectedMQ === 'rabbitmq'"
          class="rec-text"
        >
          <strong>RabbitMQ</strong>
          是最稳妥的选择，适合大多数传统业务场景。如果团队有 AMQP
          经验，或者需要复杂的路由规则，优先选择它。
        </div>
        <div
          v-else-if="selectedMQ === 'kafka'"
          class="rec-text"
        >
          <strong>Kafka</strong> 适合大数据量和流式处理场景。如果需要处理百万级
          TPS，或者需要消息回溯、与大数据生态集成，选择 Kafka。
        </div>
        <div
          v-else-if="selectedMQ === 'rocketmq'"
          class="rec-text"
        >
          <strong>RocketMQ</strong>
          是阿里开源，特别适合电商、金融场景。如果需要事务消息、顺序消息、延迟消息等高级特性，RocketMQ
          是最佳选择。
        </div>
        <div
          v-else
          class="rec-text"
        >
          <strong>Redis Stream</strong> 最轻量，适合小团队和 MVP
          验证。如果已经有 Redis 基础设施，且对可靠性要求不是极高，可以先用
          Redis Stream 快速实现。
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const selectedMQ = ref('rabbitmq')

const messageQueues = [
  {
    name: 'rabbitmq',
    label: 'RabbitMQ',
    positioning: '传统消息队列',
    throughput: '1 万/秒',
    throughputPercent: 10,
    latency: '微秒级',
    latencyDesc: '极低延迟',
    reliability: '高',
    reliabilityDesc: '持久化支持',
    learning: '中等',
    learningPercent: 40,
    ordering: '支持（单队列）',
    rewind: '不支持',
    bestScenario: '传统业务',
    features: [
      'AMQP 协议标准',
      '灵活的路由规则',
      '多种消息模式',
      '管理界面友好',
      '成熟的生态'
    ],
    useCases: [
      '传统业务系统',
      '任务队列',
      '需要复杂路由规则',
      '对延迟敏感（微秒级）',
      '团队熟悉 AMQP'
    ],
    notRecommended: ['吞吐量要求百万级', '需要消息回溯功能']
  },
  {
    name: 'kafka',
    label: 'Kafka',
    positioning: '分布式日志系统',
    throughput: '100 万/秒',
    throughputPercent: 100,
    latency: '毫秒级',
    latencyDesc: '相对较高',
    reliability: '高',
    reliabilityDesc: '多副本机制',
    learning: '陡峭',
    learningPercent: 80,
    ordering: '支持（分区内）',
    rewind: '支持',
    bestScenario: '日志/流处理',
    features: [
      '超高吞吐量',
      '消息回溯能力',
      '分布式架构',
      '与大数据生态集成',
      '分区机制'
    ],
    useCases: [
      '日志收集',
      '流式处理',
      '事件溯源',
      '用户行为分析',
      '百万级 TPS 场景'
    ],
    notRecommended: ['对延迟极度敏感', '简单的任务队列', '小团队快速开发']
  },
  {
    name: 'rocketmq',
    label: 'RocketMQ',
    positioning: '电商级消息队列',
    throughput: '10 万/秒',
    throughputPercent: 30,
    latency: '毫秒级',
    latencyDesc: '低延迟',
    reliability: '高',
    reliabilityDesc: '同步/异步刷盘',
    learning: '陡峭',
    learningPercent: 70,
    ordering: '支持',
    rewind: '支持',
    bestScenario: '电商/金融',
    features: ['事务消息', '顺序消息', '延迟消息', '消息过滤', '金融级可靠性'],
    useCases: [
      '电商交易系统',
      '金融支付',
      '订单处理',
      '需要事务一致性',
      '需要定时/延迟消息'
    ],
    notRecommended: ['简单的异步任务', '小团队快速验证', '不需要高级特性']
  },
  {
    name: 'redis',
    label: 'Redis Stream',
    positioning: '轻量级队列',
    throughput: '5 万/秒',
    throughputPercent: 20,
    latency: '毫秒级',
    latencyDesc: '低延迟',
    reliability: '中',
    reliabilityDesc: 'AOF 持久化',
    learning: '简单',
    learningPercent: 15,
    ordering: '支持',
    rewind: '支持',
    bestScenario: '小规模队列',
    features: ['轻量级', '基于 Redis', '学习成本低', '易于部署', '性能优秀'],
    useCases: [
      '小团队项目',
      'MVP 快速验证',
      '已有 Redis 基础设施',
      '简单队列需求',
      '对可靠性要求不高'
    ],
    notRecommended: ['对可靠性要求极高', '复杂的路由需求', '需要事务消息']
  }
]

const currentMQ = computed(() => {
  return (
    messageQueues.find((mq) => mq.name === selectedMQ.value) || messageQueues[0]
  )
})

const selectMQ = (name) => {
  selectedMQ.value = name
}
</script>

<style scoped>
.mq-comparison-demo {
  border: 1px solid var(--vp-c-divider);
  background: var(--vp-c-bg-soft);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-family: var(--vp-font-family-base);
}

.header {
  margin-bottom: 1rem;
}

.title {
  font-weight: 700;
  font-size: 1.05rem;
}

.subtitle {
  color: var(--vp-c-text-2);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.mq-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.mq-btn {
  padding: 0.75rem 1rem;
  border: 2px solid var(--vp-c-divider);
  background: var(--vp-c-bg);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.mq-btn:hover {
  border-color: var(--vp-c-brand);
}

.mq-btn.active {
  background: var(--vp-c-brand);
  color: #fff;
  border-color: var(--vp-c-brand);
}

.mq-details {
  margin-bottom: 1.5rem;
}

.mq-card {
  background: var(--vp-c-bg);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--vp-c-divider);
}

.mq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mq-name {
  font-size: 1.3rem;
  font-weight: 700;
}

.mq-tag {
  padding: 0.4rem 0.8rem;
  background: rgba(59, 130, 246, 0.15);
  color: var(--vp-c-brand);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metric {
  background: var(--vp-c-bg-soft);
  border-radius: 6px;
  padding: 0.75rem;
}

.metric-label {
  font-size: 0.85rem;
  color: var(--vp-c-text-2);
  margin-bottom: 0.5rem;
}

.metric-value {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.metric-desc {
  font-size: 0.8rem;
  color: var(--vp-c-text-3);
}

.metric-bar {
  height: 6px;
  background: var(--vp-c-bg);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  transition: width 0.5s ease;
}

.bar-fill.learning {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.features {
  margin-bottom: 1.5rem;
}

.feature-title {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.feature-item {
  padding: 0.5rem 0.75rem;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 6px;
  font-size: 0.85rem;
  color: #166534;
}

.use-cases,
.not-recommended {
  margin-bottom: 1rem;
}

.use-case-title,
.not-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.use-case-list,
.not-list {
  margin: 0;
  padding-left: 1.5rem;
}

.use-case-list li,
.not-list li {
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.not-list li {
  color: var(--vp-c-text-2);
}

.comparison-table {
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.table-title {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th,
td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--vp-c-divider);
}

th {
  background: var(--vp-c-bg);
  font-weight: 600;
}

td.highlight,
th.highlight {
  background: rgba(59, 130, 246, 0.1);
  font-weight: 600;
}

.recommendation {
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  padding: 0.75rem;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.rec-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.rec-text {
  font-size: 0.9rem;
  line-height: 1.6;
}
</style>