windows/app/pages/500.vue

450 lines
9.4 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="error-page">
<!-- Windows-style Error Window -->
<div class="error-window">
<!-- Title Bar -->
<div class="title-bar">
<div class="title-bar-content">
<div class="title-bar-icon"></div>
<div class="title-bar-text">{{ $t('error.title') }}</div>
</div>
<div class="title-bar-controls">
<button class="control-btn close-btn" @click="goHome">
<span class="control-btn-icon">×</span>
</button>
</div>
</div>
<!-- Window Content -->
<div class="window-content">
<div class="error-content">
<!-- Error Icon -->
<div class="error-icon">
<div class="error-code">500</div>
<div class="error-symbol"></div>
</div>
<!-- Error Message -->
<div class="error-message">
<h1 class="error-title">{{ $t('error.serverError') }}</h1>
<p class="error-description">{{ $t('error.serverErrorDescription') }}</p>
</div>
<!-- Action Buttons -->
<div class="error-actions">
<button class="action-btn primary" @click="goHome">
<span class="btn-icon">🏠</span>
{{ $t('error.goHome') }}
</button>
<button class="action-btn secondary" @click="refreshPage">
<span class="btn-icon">🔄</span>
{{ $t('error.refresh') }}
</button>
<button class="action-btn secondary" @click="reportError">
<span class="btn-icon">📧</span>
{{ $t('error.report') }}
</button>
</div>
<!-- Technical Details (Collapsible) -->
<div class="technical-details">
<button class="details-toggle" @click="toggleDetails">
<span class="toggle-icon" :class="{ 'rotated': showDetails }"></span>
{{ $t('error.technicalDetails') }}
</button>
<div v-if="showDetails" class="details-content">
<div class="details-item">
<strong>{{ $t('error.errorCode') }}:</strong> 500 - Internal Server Error
</div>
<div class="details-item">
<strong>{{ $t('error.timestamp') }}:</strong> {{ currentTime }}
</div>
<div class="details-item">
<strong>{{ $t('error.requestId') }}:</strong> {{ requestId }}
</div>
<div class="details-item">
<strong>{{ $t('error.userAgent') }}:</strong> {{ userAgent }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Background Pattern -->
<div class="error-background">
<div class="pattern-grid"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const router = useRouter();
const { t } = useI18n();
// Reactive state
const showDetails = ref(false);
const currentTime = ref('');
const requestId = ref('');
const userAgent = ref('');
// Computed properties
const goHome = () => {
router.push('/');
};
const refreshPage = () => {
window.location.reload();
};
const reportError = () => {
// In a real application, this would open an error reporting dialog
console.log('Error reported');
alert(t('error.reportSent'));
};
const toggleDetails = () => {
showDetails.value = !showDetails.value;
};
// Initialize data
onMounted(() => {
currentTime.value = new Date().toLocaleString();
requestId.value = Math.random().toString(36).substr(2, 9);
userAgent.value = navigator.userAgent.substring(0, 50) + '...';
});
// Set page title
useHead({
title: t('error.title')
});
</script>
<style scoped>
.error-page {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--background-desktop);
display: flex;
align-items: center;
justify-content: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
overflow: hidden;
}
.error-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
z-index: 0;
}
.pattern-grid {
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
animation: grid-move 20s linear infinite;
}
@keyframes grid-move {
0% { transform: translate(0, 0); }
100% { transform: translate(20px, 20px); }
}
.error-window {
position: relative;
z-index: 1;
width: 90%;
max-width: 600px;
background: var(--window-background);
border: 1px solid var(--window-border-color);
border-radius: var(--rounded-window);
box-shadow: var(--shadow-window);
overflow: hidden;
animation: window-appear 0.5s ease-out;
}
@keyframes window-appear {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.title-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--title-bar-background);
color: var(--title-bar-text-color);
padding: 8px 12px;
border-bottom: 1px solid var(--window-border-color);
}
.title-bar-content {
display: flex;
align-items: center;
gap: 8px;
}
.title-bar-icon {
font-size: 16px;
}
.title-bar-text {
font-weight: 600;
font-size: 14px;
}
.title-bar-controls {
display: flex;
gap: 4px;
}
.control-btn {
width: 20px;
height: 20px;
border: none;
border-radius: var(--rounded-control-btn);
background: var(--control-btn-close-bg);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
font-weight: bold;
}
.control-btn:hover {
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.window-content {
padding: 32px;
color: var(--content-text-color);
}
.error-content {
text-align: center;
}
.error-icon {
margin-bottom: 24px;
position: relative;
}
.error-code {
font-size: 72px;
font-weight: 900;
color: var(--control-btn-close-bg);
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
margin-bottom: 8px;
}
.error-symbol {
font-size: 48px;
position: absolute;
top: -10px;
right: 50%;
transform: translateX(50%);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(50%) translateY(0);
}
40% {
transform: translateX(50%) translateY(-10px);
}
60% {
transform: translateX(50%) translateY(-5px);
}
}
.error-message {
margin-bottom: 32px;
}
.error-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 12px;
color: var(--content-text-color);
}
.error-description {
font-size: 16px;
line-height: 1.6;
color: var(--content-text-color);
opacity: 0.8;
max-width: 400px;
margin: 0 auto;
}
.error-actions {
display: flex;
gap: 12px;
justify-content: center;
margin-bottom: 32px;
flex-wrap: wrap;
}
.action-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: none;
border-radius: var(--rounded-button);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
min-width: 120px;
justify-content: center;
}
.action-btn.primary {
background: var(--control-btn-maximize-bg);
color: white;
box-shadow: var(--shadow-button);
}
.action-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(76, 209, 55, 0.4);
}
.action-btn.secondary {
background: var(--taskbar-item-background);
color: var(--content-text-color);
border: 1px solid var(--window-border-color);
}
.action-btn.secondary:hover {
background: var(--taskbar-item-background-hover);
transform: translateY(-1px);
}
.btn-icon {
font-size: 16px;
}
.technical-details {
border-top: 1px solid var(--window-border-color);
padding-top: 20px;
}
.details-toggle {
background: none;
border: none;
color: var(--content-text-color);
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
margin: 0 auto;
padding: 8px;
border-radius: var(--rounded-button);
transition: background-color 0.2s ease;
}
.details-toggle:hover {
background: var(--taskbar-item-background);
}
.toggle-icon {
transition: transform 0.3s ease;
font-size: 12px;
}
.toggle-icon.rotated {
transform: rotate(180deg);
}
.details-content {
margin-top: 16px;
padding: 16px;
background: var(--taskbar-item-background);
border-radius: var(--rounded-button);
text-align: left;
font-size: 13px;
line-height: 1.5;
}
.details-item {
margin-bottom: 8px;
word-break: break-all;
}
.details-item:last-child {
margin-bottom: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.error-window {
width: 95%;
margin: 20px;
}
.window-content {
padding: 24px;
}
.error-code {
font-size: 56px;
}
.error-title {
font-size: 24px;
}
.error-actions {
flex-direction: column;
align-items: center;
}
.action-btn {
width: 100%;
max-width: 200px;
}
}
/* Dark/Light theme transitions */
.error-page {
transition: background-color 0.3s ease;
}
.error-window {
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.window-content {
transition: color 0.3s ease;
}
</style>