ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增WebSocket组件

Browse Source
This commit is contained in:
zqm
2026-01-30 15:38:48 +08:00
parent 29d3b17657
commit c42a1fd5fd
9 changed files with 2181 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

386
Web/Vue/CubeLib/examples/CubeWebSocket/AutoReconnectExample.vue Normal file
View File

@@ -0,0 +1,386 @@
<template>
<div class="auto-reconnect-example">
<div class="config-panel">
<h3>重连配置</h3>
<div class="config-item">
<label class="config-label">自动重连:</label>
<input type="checkbox" v-model="reconnectEnabled" />
</div>
<div class="config-item">
<label class="config-label">最大重连延迟:</label>
<input
type="number"
v-model.number="maxReconnectDelay"
:disabled="!reconnectEnabled"
min="1000"
step="1000"
/>
<span class="unit">毫秒</span>
</div>
<div class="config-item">
<label class="config-label">调试模式:</label>
<input type="checkbox" v-model="debugMode" />
</div>
</div>
<div class="status-panel">
<h3>连接状态</h3>
<div class="status-display">
<div :class="['status-indicator', status]"></div>
<div class="status-info">
<div class="status-text">{{ statusText }}</div>
<div v-if="reconnectAttempts > 0" class="reconnect-info">
重连次数: {{ reconnectAttempts }}
</div>
<div v-if="nextReconnectDelay > 0" class="reconnect-info">
下次重连: {{ nextReconnectDelay }}秒后
</div>
</div>
</div>
</div>
<div class="timeline-panel">
<h3>重连时间线</h3>
<div class="timeline">
<div
v-for="(event, index) in timeline"
:key="index"
:class="['timeline-item', event.type]"
>
<div class="timeline-time">{{ event.time }}</div>
<div class="timeline-content">{{ event.message }}</div>
</div>
</div>
</div>
<div class="control-panel">
<h3>控制</h3>
<div class="control-buttons">
<button @click="handleConnect" :disabled="status === 'connecting'">
连接
</button>
<button @click="handleDisconnect" :disabled="status === 'disconnected'">
断开
</button>
<button @click="handleSendTest" :disabled="status !== 'connected'">
发送测试消息
</button>
<button @click="handleSimulateDisconnect" :disabled="status !== 'connected'">
模拟断开
</button>
<button @click="handleClearTimeline">清空时间线</button>
</div>
</div>
<CubeWebSocket
ref="wsRef"
ws-url="ws://localhost:8086/ws"
:auto-connect="false"
:reconnect="reconnectEnabled"
:max-reconnect-delay="maxReconnectDelay"
:debug-mode="debugMode"
@connected="handleConnected"
@disconnected="handleDisconnected"
@error="handleError"
@status-changed="handleStatusChanged"
@connecting="handleConnecting"
@reconnecting="handleReconnecting"
@message-sent="handleMessageSent"
/>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import CubeWebSocket from 'joyd.web.vue.cubelib'
const wsRef = ref(null)
const status = ref('disconnected')
const reconnectEnabled = ref(true)
const maxReconnectDelay = ref(30000)
const debugMode = ref(false)
const reconnectAttempts = ref(0)
const nextReconnectDelay = ref(0)
const timeline = ref([])
const statusText = computed(() => {
const statusMap = {
disconnected: '未连接',
connecting: '连接中',
connected: '已连接',
reconnecting: '重连中',
error: '错误'
}
return statusMap[status.value] || status.value
})
const addTimelineEvent = (type, message) => {
timeline.value.unshift({
type,
time: new Date().toLocaleTimeString(),
message
})
if (timeline.value.length > 20) {
timeline.value = timeline.value.slice(0, 20)
}
}
const handleConnected = () => {
console.log('[自动重连示例] WebSocket 已连接')
reconnectAttempts.value = 0
nextReconnectDelay.value = 0
addTimelineEvent('success', '连接成功')
}
const handleDisconnected = (code, reason) => {
console.log('[自动重连示例] WebSocket 已断开:', code, reason)
addTimelineEvent('warning', `连接断开 (${code}): ${reason}`)
}
const handleError = (error) => {
console.error('[自动重连示例] WebSocket 错误:', error)
addTimelineEvent('error', `连接错误: ${error.message}`)
}
const handleStatusChanged = (newStatus) => {
console.log('[自动重连示例] 状态变化:', newStatus)
status.value = newStatus
}
const handleConnecting = () => {
console.log('[自动重连示例] 开始连接')
addTimelineEvent('info', '开始连接')
}
const handleReconnecting = () => {
console.log('[自动重连示例] 开始重连')
reconnectAttempts.value++
const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.value - 1), maxReconnectDelay.value)
nextReconnectDelay.value = Math.round(delay / 1000)
addTimelineEvent('info', `开始重连 (第${reconnectAttempts.value}次，${nextReconnectDelay.value}秒后)`)
}
const handleMessageSent = (message) => {
console.log('[自动重连示例] 消息已发送:', message)
addTimelineEvent('success', `发送消息: ${message.type}`)
}
const handleConnect = () => {
wsRef.value?.connect()
}
const handleDisconnect = () => {
wsRef.value?.disconnect()
}
const handleSendTest = () => {
wsRef.value?.send('test', {
text: '测试消息',
timestamp: Date.now()
})
}
const handleSimulateDisconnect = () => {
if (wsRef.value) {
wsRef.value.disconnect()
addTimelineEvent('warning', '手动断开连接')
}
}
const handleClearTimeline = () => {
timeline.value = []
}
</script>
<style scoped>
.auto-reconnect-example {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.config-panel,
.status-panel,
.timeline-panel,
.control-panel {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.config-panel h3,
.status-panel h3,
.timeline-panel h3,
.control-panel h3 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
}
.config-item {
display: flex;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.config-label {
width: 120px;
color: #666;
}
.config-item input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}
.config-item input[type="number"] {
width: 100px;
padding: 6px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.config-item input:disabled {
background: #f0f0f0;
cursor: not-allowed;
}
.unit {
margin-left: 8px;
color: #999;
}
.status-display {
display: flex;
align-items: center;
gap: 20px;
}
.status-indicator {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
color: #fff;
}
.status-indicator.disconnected {
background: #999;
}
.status-indicator.connecting {
background: #faad14;
}
.status-indicator.connected {
background: #52c41a;
}
.status-indicator.reconnecting {
background: #1890ff;
}
.status-indicator.error {
background: #ff4d4f;
}
.status-info {
flex: 1;
}
.status-text {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.reconnect-info {
font-size: 14px;
color: #666;
margin-top: 4px;
}
.timeline {
max-height: 300px;
overflow-y: auto;
background: #fff;
border-radius: 4px;
padding: 10px;
}
.timeline-item {
display: flex;
gap: 12px;
padding: 8px;
border-bottom: 1px solid #f0f0f0;
}
.timeline-item:last-child {
border-bottom: none;
}
.timeline-item.success {
border-left: 3px solid #52c41a;
}
.timeline-item.warning {
border-left: 3px solid #faad14;
}
.timeline-item.error {
border-left: 3px solid #ff4d4f;
}
.timeline-item.info {
border-left: 3px solid #1890ff;
}
.timeline-time {
min-width: 80px;
color: #999;
font-size: 12px;
}
.timeline-content {
flex: 1;
font-size: 14px;
color: #333;
}
.control-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.control-buttons button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background: #667eea;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.control-buttons button:hover:not(:disabled) {
background: #5568d3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.control-buttons button:disabled {
background: #ccc;
cursor: not-allowed;
opacity: 0.6;
}
</style>

320
Web/Vue/CubeLib/examples/CubeWebSocket/BasicExample.vue Normal file
View File

@@ -0,0 +1,320 @@
<template>
<div class="basic-example">
<div class="status-panel">
<h3>基础使用示例</h3>
<div class="status-item">
<span class="label">连接状态:</span>
<span :class="['status', status]">{{ statusText }}</span>
</div>
<div class="status-item">
<span class="label">已连接:</span>
<span :class="['value', isConnected ? 'yes' : 'no']">
{{ isConnected ? '是' : '否' }}
</span>
</div>
<div class="status-item">
<span class="label">重连次数:</span>
<span class="value">{{ reconnectCount }}</span>
</div>
</div>
<div class="message-panel">
<h3>消息列表</h3>
<div class="message-list">
<div v-for="(msg, index) in messages" :key="index" class="message-item">
<div class="message-type">{{ msg.type }}</div>
<div class="message-content">{{ JSON.stringify(msg.data, null, 2) }}</div>
</div>
<div v-if="messages.length === 0" class="empty">暂无消息</div>
</div>
</div>
<div class="control-panel">
<h3>控制面板</h3>
<div class="control-buttons">
<button @click="handleConnect" :disabled="isConnected">连接</button>
<button @click="handleDisconnect" :disabled="!isConnected">断开</button>
<button @click="handleSend" :disabled="!isConnected">发送测试消息</button>
<button @click="handleClearMessages">清空消息</button>
</div>
</div>
<CubeWebSocket
ref="wsRef"
ws-url="ws://localhost:8086/ws"
:auto-connect="false"
:reconnect="true"
:debug-mode="true"
@connected="handleConnected"
@disconnected="handleDisconnected"
@error="handleError"
@message="handleMessage"
@status-changed="handleStatusChanged"
@connecting="handleConnecting"
@reconnecting="handleReconnecting"
@message-sent="handleMessageSent"
@message-queued="handleMessageQueued"
@message-failed="handleMessageFailed"
/>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import CubeWebSocket from 'joyd.web.vue.cubelib'
const wsRef = ref(null)
const status = ref('disconnected')
const messages = ref([])
const reconnectCount = ref(0)
const errorMessage = ref('')
const statusText = computed(() => {
const statusMap = {
disconnected: '未连接',
connecting: '连接中',
connected: '已连接',
reconnecting: '重连中',
error: '错误'
}
return statusMap[status.value] || status.value
})
const isConnected = computed(() => status.value === 'connected')
const handleConnected = () => {
console.log('[基础示例] WebSocket 已连接')
reconnectCount.value = 0
}
const handleDisconnected = (code, reason) => {
console.log('[基础示例] WebSocket 已断开:', code, reason)
}
const handleError = (error) => {
console.error('[基础示例] WebSocket 错误:', error)
errorMessage.value = error.message || '连接错误'
setTimeout(() => {
errorMessage.value = ''
}, 3000)
}
const handleMessage = (message) => {
console.log('[基础示例] 收到消息:', message)
messages.value.push({
...message,
timestamp: new Date().toLocaleTimeString()
})
}
const handleStatusChanged = (newStatus) => {
console.log('[基础示例] 状态变化:', newStatus)
status.value = newStatus
}
const handleConnecting = () => {
console.log('[基础示例] 开始连接')
}
const handleReconnecting = () => {
console.log('[基础示例] 开始重连')
reconnectCount.value++
}
const handleMessageSent = (message) => {
console.log('[基础示例] 消息已发送:', message)
}
const handleMessageQueued = (message) => {
console.log('[基础示例] 消息已加入队列:', message)
}
const handleMessageFailed = (data) => {
console.error('[基础示例] 消息发送失败:', data)
}
const handleConnect = () => {
wsRef.value?.connect()
}
const handleDisconnect = () => {
wsRef.value?.disconnect()
}
const handleSend = () => {
wsRef.value?.send('test', {
text: 'Hello from CubeWebSocket',
timestamp: Date.now()
})
}
const handleClearMessages = () => {
messages.value = []
}
</script>
<style scoped>
.basic-example {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.status-panel {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.status-panel h3 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
}
.status-item {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
}
.status-item .label {
width: 100px;
color: #666;
}
.status-item .value {
font-weight: 600;
color: #333;
}
.status {
padding: 4px 12px;
border-radius: 4px;
font-weight: 600;
}
.status.disconnected {
background: #999;
color: #fff;
}
.status.connecting {
background: #faad14;
color: #fff;
}
.status.connected {
background: #52c41a;
color: #fff;
}
.status.reconnecting {
background: #1890ff;
color: #fff;
}
.status.error {
background: #ff4d4f;
color: #fff;
}
.value.yes {
color: #52c41a;
}
.value.no {
color: #999;
}
.message-panel {
background: #fff;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid #e0e0e0;
}
.message-panel h3 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
}
.message-list {
max-height: 400px;
overflow-y: auto;
}
.message-item {
padding: 12px;
border-bottom: 1px solid #f0f0f0;
}
.message-item:last-child {
border-bottom: none;
}
.message-type {
font-weight: 600;
color: #667eea;
margin-bottom: 6px;
}
.message-content {
font-family: 'Courier New', monospace;
font-size: 12px;
color: #333;
white-space: pre-wrap;
word-break: break-all;
}
.empty {
text-align: center;
padding: 40px;
color: #999;
}
.control-panel {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
}
.control-panel h3 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
}
.control-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.control-buttons button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background: #667eea;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.control-buttons button:hover:not(:disabled) {
background: #5568d3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.control-buttons button:disabled {
background: #ccc;
cursor: not-allowed;
opacity: 0.6;
}
</style>

500
Web/Vue/CubeLib/examples/CubeWebSocket/MessageQueueExample.vue Normal file
View File

@@ -0,0 +1,500 @@
<template>
<div class="message-queue-example">
<div class="queue-panel">
<h3>消息队列</h3>
<div class="queue-stats">
<div class="stat-item">
<span class="stat-label">队列大小:</span>
<span :class="['stat-value', { 'warning': queueSize > 50, 'danger': queueSize > 80 }]">
{{ queueSize }} / {{ maxQueueSize }}
</span>
</div>
<div class="stat-item">
<span class="stat-label">已发送:</span>
<span class="stat-value success">{{ sentCount }}</span>
</div>
<div class="stat-item">
<span class="stat-label">已排队:</span>
<span class="stat-value info">{{ queuedCount }}</span>
</div>
<div class="stat-item">
<span class="stat-label">发送失败:</span>
<span class="stat-value error">{{ failedCount }}</span>
</div>
</div>
<div class="queue-progress">
<div class="progress-bar">
<div
class="progress-fill"
:style="{ width: `${(queueSize / maxQueueSize) * 100}%` }"
:class="{ 'warning': queueSize > 50, 'danger': queueSize > 80 }"
></div>
</div>
<div class="progress-text">{{ Math.round((queueSize / maxQueueSize) * 100) }}%</div>
</div>
<div class="queue-config">
<div class="config-item">
<label class="config-label">最大队列大小:</label>
<input
type="number"
v-model.number="maxQueueSize"
min="10"
max="500"
step="10"
/>
</div>
<div class="config-item">
<label class="config-label">自动发送间隔:</label>
<input
type="number"
v-model.number="autoSendInterval"
min="100"
max="5000"
step="100"
/>
<span class="unit">毫秒</span>
</div>
</div>
</div>
<div class="message-log-panel">
<h3>消息日志</h3>
<div class="log-filters">
<button
v-for="filter in filters"
:key="filter.value"
:class="['filter-btn', { active: activeFilter === filter.value }]"
@click="activeFilter = filter.value"
>
{{ filter.label }}
</button>
</div>
<div class="log-list">
<div
v-for="(log, index) in filteredLogs"
:key="index"
:class="['log-item', log.type]"
>
<div class="log-time">{{ log.time }}</div>
<div class="log-content">
<div class="log-type">{{ log.type }}</div>
<div class="log-message">{{ log.message }}</div>
</div>
</div>
<div v-if="filteredLogs.length === 0" class="empty">暂无日志</div>
</div>
</div>
<div class="control-panel">
<h3>控制</h3>
<div class="control-buttons">
<button @click="handleConnect" :disabled="status !== 'disconnected'">
连接
</button>
<button @click="handleDisconnect" :disabled="status !== 'connected'">
断开
</button>
<button @click="handleSendSingle" :disabled="status !== 'connected'">
发送单条消息
</button>
<button @click="handleSendBatch" :disabled="status !== 'connected'">
批量发送10条
</button>
<button @click="handleClearLogs" class="secondary">
清空日志
</button>
</div>
</div>
<CubeWebSocket
ref="wsRef"
ws-url="ws://localhost:8086/ws"
:auto-connect="false"
:max-queue-size="maxQueueSize"
:debug-mode="true"
@connected="handleConnected"
@disconnected="handleDisconnected"
@error="handleError"
@message="handleMessage"
@status-changed="handleStatusChanged"
@message-sent="handleMessageSent"
@message-queued="handleMessageQueued"
@message-failed="handleMessageFailed"
/>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import CubeWebSocket from 'joyd.web.vue.cubelib'
const wsRef = ref(null)
const status = ref('disconnected')
const queueSize = ref(0)
const maxQueueSize = ref(100)
const sentCount = ref(0)
const queuedCount = ref(0)
const failedCount = ref(0)
const autoSendInterval = ref(500)
const logs = ref([])
const activeFilter = ref('all')
const filters = [
{ value: 'all', label: '全部' },
{ value: 'sent', label: '已发送' },
{ value: 'queued', label: '已排队' },
{ value: 'failed', label: '失败' }
]
const filteredLogs = computed(() => {
if (activeFilter.value === 'all') {
return logs.value
}
return logs.value.filter(log => log.type === activeFilter.value)
})
const addLog = (type, message) => {
logs.value.unshift({
type,
time: new Date().toLocaleTimeString(),
message
})
if (logs.value.length > 100) {
logs.value = logs.value.slice(0, 100)
}
}
const handleConnected = () => {
console.log('[消息队列示例] WebSocket 已连接')
addLog('info', '连接成功，开始发送队列中的消息')
}
const handleDisconnected = (code, reason) => {
console.log('[消息队列示例] WebSocket 已断开:', code, reason)
addLog('warning', `连接断开 (${code}): ${reason}`)
}
const handleError = (error) => {
console.error('[消息队列示例] WebSocket 错误:', error)
addLog('error', `连接错误: ${error.message}`)
}
const handleMessage = (message) => {
console.log('[消息队列示例] 收到消息:', message)
addLog('info', `收到消息: ${message.type}`)
}
const handleStatusChanged = (newStatus) => {
console.log('[消息队列示例] 状态变化:', newStatus)
status.value = newStatus
}
const handleMessageSent = (message) => {
console.log('[消息队列示例] 消息已发送:', message)
sentCount.value++
addLog('sent', `发送消息: ${message.type}`)
}
const handleMessageQueued = (message) => {
console.log('[消息队列示例] 消息已加入队列:', message)
queueSize.value++
queuedCount.value++
addLog('queued', `消息加入队列: ${message.type}`)
}
const handleMessageFailed = (data) => {
console.error('[消息队列示例] 消息发送失败:', data)
failedCount.value++
queueSize.value--
addLog('failed', `消息发送失败 (${data.reason}): ${data.message.type}`)
}
const handleConnect = () => {
wsRef.value?.connect()
}
const handleDisconnect = () => {
wsRef.value?.disconnect()
}
const handleSendSingle = () => {
wsRef.value?.send('test', {
text: `测试消息 ${Date.now()}`,
index: sentCount.value + queuedCount.value
})
}
const handleSendBatch = () => {
for (let i = 0; i < 10; i++) {
setTimeout(() => {
wsRef.value?.send('batch', {
index: i,
text: `批量消息 ${i}`,
timestamp: Date.now()
})
}, i * autoSendInterval.value)
}
}
const handleClearLogs = () => {
logs.value = []
sentCount.value = 0
queuedCount.value = 0
failedCount.value = 0
}
</script>
<style scoped>
.message-queue-example {
padding: 20px;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.queue-panel,
.message-log-panel,
.control-panel {
background: #f5f5f5;
padding: 20px;
border-radius: 8px;
}
.queue-panel h3,
.message-log-panel h3,
.control-panel h3 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
}
.queue-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.stat-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.stat-label {
color: #666;
}
.stat-value {
font-weight: 600;
color: #333;
}
.stat-value.success {
color: #52c41a;
}
.stat-value.info {
color: #1890ff;
}
.stat-value.error {
color: #ff4d4f;
}
.stat-value.warning {
color: #faad14;
}
.stat-value.danger {
color: #ff4d4f;
}
.queue-progress {
margin-bottom: 20px;
}
.progress-bar {
height: 20px;
background: #e0e0e0;
border-radius: 10px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #667eea;
transition: width 0.3s ease;
}
.progress-fill.warning {
background: #faad14;
}
.progress-fill.danger {
background: #ff4d4f;
}
.progress-text {
text-align: center;
font-size: 12px;
color: #666;
margin-top: 4px;
}
.queue-config {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.config-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.config-label {
color: #666;
}
.config-item input {
padding: 6px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.unit {
color: #999;
font-size: 12px;
}
.log-filters {
display: flex;
gap: 8px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.filter-btn {
padding: 6px 16px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
color: #666;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-btn:hover {
background: #f0f0f0;
}
.filter-btn.active {
background: #667eea;
color: #fff;
border-color: #667eea;
}
.log-list {
max-height: 400px;
overflow-y: auto;
background: #fff;
border-radius: 4px;
padding: 10px;
}
.log-item {
display: flex;
gap: 12px;
padding: 8px;
border-bottom: 1px solid #f0f0f0;
}
.log-item:last-child {
border-bottom: none;
}
.log-item.sent {
border-left: 3px solid #52c41a;
}
.log-item.queued {
border-left: 3px solid #1890ff;
}
.log-item.failed {
border-left: 3px solid #ff4d4f;
}
.log-time {
min-width: 80px;
color: #999;
font-size: 12px;
}
.log-content {
flex: 1;
}
.log-type {
font-weight: 600;
color: #667eea;
margin-bottom: 4px;
}
.log-message {
font-size: 13px;
color: #333;
}
.empty {
text-align: center;
padding: 40px;
color: #999;
}
.control-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.control-buttons button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background: #667eea;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.control-buttons button:hover:not(:disabled) {
background: #5568d3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
.control-buttons button:disabled {
background: #ccc;
cursor: not-allowed;
opacity: 0.6;
}
.control-buttons button.secondary {
background: #6c757d;
}
.control-buttons button.secondary:hover:not(:disabled) {
background: #5a6268;
}
</style>