237c7802e5
Some checks failed
Deploy / deploy (push) Has been cancelled
Full-stack web application for Telegram management - Frontend: Vue 3 + Vben Admin - Backend: NestJS - Features: User management, group broadcast, statistics 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<template>
|
|
<div class="error-component">
|
|
<div class="error-icon">
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="8" x2="12" y2="12"></line>
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
|
</svg>
|
|
</div>
|
|
<h3 class="error-title">{{ title }}</h3>
|
|
<p class="error-message">{{ message }}</p>
|
|
<el-button v-if="showRetry" type="primary" @click="$emit('retry')">
|
|
Retry
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: 'Oops! Something went wrong'
|
|
},
|
|
message: {
|
|
type: String,
|
|
default: 'Failed to load the component. Please try again.'
|
|
},
|
|
showRetry: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
|
|
defineEmits(['retry'])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.error-component {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 200px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.error-icon {
|
|
color: #f56c6c;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.error-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.error-message {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
margin: 0 0 16px;
|
|
max-width: 400px;
|
|
}
|
|
</style> |