delorex/test-repo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update docs and components, fix DLQ demo bug

Browse Source
This commit is contained in:
sanbuphy
2026-01-18 12:21:49 +08:00
parent 26ed39e1eb
commit e41063a1cd
159 changed files with 54236 additions and 2525 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue
+559
View File
@@ -0,0 +1,559 @@
<!--
DeadLetterQueueDemo.vue
死信队列演示 - 处理失败消息
-->
<template>
<div class="dlq-demo">
<div class="header">
<div class="title">死信队列：消息的"急救站"</div>
<div class="subtitle">处理无法消费的消息，避免阻塞队列</div>
</div>
<div class="controls">
<div class="control">
<label>失败率：</label>
<input v-model="failureRate" type="range" min="0" max="100" step="10" />
<span class="value">{{ failureRate }}%</span>
</div>
<div class="control">
<label>最大重试次数：</label>
<input v-model="maxRetries" type="range" min="1" max="5" step="1" />
<span class="value">{{ maxRetries }}</span>
</div>
</div>
<div class="flow-container">
<div class="main-queue-section">
<div class="section-title">📦 主队列</div>
<div class="queue-box main-queue">
<div class="queue-header">
<span>正常消息队列</span>
<span class="count">{{ mainQueue.length }} 条</span>
</div>
<div class="message-list">
<div
v-for="msg in mainQueue"
:key="msg.id"
class="message-item"
:class="{ processing: msg.processing }"
>
<div class="msg-id">#{{ msg.id }}</div>
<div class="msg-retries" v-if="msg.retries > 0">
重试: {{ msg.retries }}/{{ maxRetries }}
</div>
</div>
<div v-if="mainQueue.length === 0" class="empty">队列为空</div>
</div>
</div>
<button class="add-btn" @click="addMessage" :disabled="processing">
+ 添加消息
</button>
</div>
<div class="processing-section">
<div class="section-title">⚙️ 消费处理</div>
<div class="processor-box">
<div class="processor-icon" :class="{ active: processing }">
{{ processing ? '⚙️' : '💤' }}
</div>
<div class="processor-status">
{{ processing ? '处理中...' : '空闲' }}
</div>
<div v-if="currentMessage" class="current-msg">
处理: #{{ currentMessage.id }}
</div>
<div v-if="lastResult" class="last-result" :class="lastResult.type">
{{ lastResult.message }}
</div>
</div>
</div>
<div class="dlq-section">
<div class="section-title">⚠️ 死信队列</div>
<div class="queue-box dead-letter">
<div class="queue-header">
<span>失败消息</span>
<span class="count">{{ deadLetterQueue.length }} 条</span>
</div>
<div class="message-list">
<div
v-for="msg in deadLetterQueue"
:key="msg.id"
class="message-item failed"
>
<div class="msg-id">#{{ msg.id }}</div>
<div class="msg-error">{{ msg.error }}</div>
</div>
<div v-if="deadLetterQueue.length === 0" class="empty">
无失败消息
</div>
</div>
</div>
<button
class="retry-btn"
@click="retryDeadLetters"
:disabled="deadLetterQueue.length === 0"
>
🔄 重试死信
</button>
</div>
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-label">总消息数</div>
<div class="stat-value">{{ totalMessages }}</div>
</div>
<div class="stat-card success">
<div class="stat-label">成功处理</div>
<div class="stat-value">{{ successCount }}</div>
</div>
<div class="stat-card warning">
<div class="stat-label">进入死信</div>
<div class="stat-value">{{ deadLetterCount }}</div>
</div>
<div class="stat-card">
<div class="stat-label">成功率</div>
<div class="stat-value">{{ successRate }}%</div>
</div>
</div>
<div class="explanation">
<div class="exp-title">💡 死信队列的作用</div>
<div class="exp-content">
<div class="exp-item">
<strong>1. 隔离异常消息：</strong>失败消息不会阻塞正常消息的处理
</div>
<div class="exp-item">
<strong>2. 保留失败记录：</strong>可以后续人工介入或自动重试
</div>
<div class="exp-item">
<strong>3. 系统保护：</strong>避免因持续失败导致消费者崩溃
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const failureRate = ref(30)
const maxRetries = ref(3)
const processing = ref(false)
const currentMessage = ref(null)
const lastResult = ref(null)
let messageId = 0
const mainQueue = ref([])
const deadLetterQueue = ref([])
const successCount = ref(0)
const totalMessages = computed(
() =>
successCount.value + deadLetterQueue.value.length + mainQueue.value.length
)
const deadLetterCount = computed(() => deadLetterQueue.value.length)
const successRate = computed(() => {
if (totalMessages.value === 0) return 0
return Math.round((successCount.value / totalMessages.value) * 100)
})
let addMessage = () => {
messageId++
mainQueue.value.push({
id: messageId,
retries: 0,
processing: false
})
}
const processNext = () => {
if (mainQueue.value.length === 0 || processing.value) {
processing.value = false
return
}
let msg = mainQueue[0]
msg.processing = true
processing.value = true
currentMessage.value = msg
lastResult.value = null
setTimeout(() => {
const shouldFail = Math.random() * 100 < failureRate.value
if (shouldFail) {
msg.retries++
msg.processing = false
if (msg.retries >= maxRetries.value) {
// 超过最大重试次数，进入死信队列
mainQueue.value.shift()
deadLetterQueue.value.push({
id: msg.id,
error: `重试 ${msg.retries} 次后仍失败`
})
lastResult.value = {
type: 'error',
message: `❌ 消息 #${msg.id} 进入死信队列`
}
} else {
// 重新入队
lastResult.value = {
type: 'warning',
message: `⚠️ 消息 #${msg.id} 处理失败，重试 ${msg.retries}/${maxRetries.value}`
}
}
setTimeout(processNext, 500)
} else {
// 成功处理
mainQueue.value.shift()
successCount.value++
msg.processing = false
currentMessage.value = null
lastResult.value = {
type: 'success',
message: `✅ 消息 #${msg.id} 处理成功`
}
setTimeout(processNext, 300)
}
}, 1000)
}
const retryDeadLetters = () => {
const failed = deadLetterQueue.value.splice(0)
failed.forEach((msg) => {
msg.retries = 0
mainQueue.value.push(msg)
})
if (!processing.value && mainQueue.value.length > 0) {
processNext()
}
}
// 自动开始处理
const startProcessing = () => {
if (!processing.value && mainQueue.value.length > 0) {
processNext()
}
}
// 监听队列变化
const checkAndProcess = () => {
startProcessing()
}
// 添加消息后自动开始处理
const originalAddMessage = addMessage
const addMessageWithAutoProcess = () => {
originalAddMessage()
checkAndProcess()
}
// 覆盖 addMessage 方法
addMessage = addMessageWithAutoProcess
</script>
<style scoped>
.dlq-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;
}
.controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.control {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.control input[type='range'] {
flex: 1;
}
.control .value {
font-weight: 600;
min-width: 3rem;
text-align: right;
}
.flow-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.section-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--vp-c-text-2);
text-align: center;
margin-bottom: 0.75rem;
}
.queue-box {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
overflow: hidden;
}
.queue-box.main-queue {
border-color: var(--vp-c-brand);
}
.queue-box.dead-letter {
border-color: #ef4444;
}
.queue-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.75rem;
background: var(--vp-c-bg-soft);
font-size: 0.8rem;
font-weight: 600;
}
.message-list {
max-height: 200px;
overflow-y: auto;
padding: 0.5rem;
}
.message-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 6px;
margin-bottom: 0.4rem;
font-size: 0.8rem;
}
.message-item.processing {
border: 1px solid #f59e0b;
background: rgba(245, 158, 11, 0.1);
}
.message-item.failed {
border: 1px solid #ef4444;
background: rgba(239, 68, 68, 0.1);
}
.msg-id {
font-weight: 600;
}
.msg-retries {
font-size: 0.7rem;
color: #f59e0b;
}
.msg-error {
font-size: 0.7rem;
color: #ef4444;
}
.empty {
text-align: center;
padding: 1.5rem;
color: var(--vp-c-text-3);
font-size: 0.85rem;
}
.add-btn,
.retry-btn {
width: 100%;
padding: 0.6rem;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
font-size: 0.85rem;
margin-top: 0.75rem;
transition: all 0.2s;
}
.add-btn {
background: var(--vp-c-brand);
color: white;
}
.add-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.add-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.retry-btn {
background: #f59e0b;
color: white;
}
.retry-btn:hover:not(:disabled) {
background: #d97706;
}
.processor-box {
background: var(--vp-c-bg);
border: 2px solid var(--vp-c-divider);
border-radius: 10px;
padding: 1.5rem;
text-align: center;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.processor-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.processor-icon.active {
animation: spin 1s linear infinite;
}
.processor-status {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.current-msg {
font-size: 0.85rem;
color: var(--vp-c-text-2);
margin-bottom: 0.5rem;
}
.last-result {
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
margin-top: 0.5rem;
}
.last-result.success {
background: #dcfce7;
color: #166534;
}
.last-result.warning {
background: rgba(245, 158, 11, 0.1);
color: #d97706;
}
.last-result.error {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-card {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
text-align: center;
border: 1px solid var(--vp-c-divider);
}
.stat-card.success {
border-color: #22c55e;
background: rgba(34, 197, 94, 0.05);
}
.stat-card.warning {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.05);
}
.stat-label {
font-size: 0.8rem;
color: var(--vp-c-text-2);
margin-bottom: 0.35rem;
}
.stat-value {
font-size: 1.3rem;
font-weight: 700;
}
.explanation {
background: var(--vp-c-bg);
border-radius: 10px;
padding: 1rem;
border: 1px solid var(--vp-c-divider);
}
.exp-title {
font-weight: 600;
margin-bottom: 0.75rem;
}
.exp-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.exp-item {
font-size: 0.9rem;
line-height: 1.5;
color: var(--vp-c-text-2);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>