<!--
 * @Date: 2025-01-21
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-10-22 13:32:48
 * @FilePath: /mlaj/src/components/ui/PdfViewer.vue
 * @Description: PDF预览组件 - 使用pdf-vue3库
-->
<template>
    <van-popup v-if="show" :show="show" @update:show="emit('update:show', $event)" position="right"
        :style="{ height: '100%', width: '100%' }">
        <div class="pdf-viewer-container">
            <!-- PDF内容区域 -->
            <div class="pdf-content" :class="{ 'pdf-no-select': preventSave }">
                <PDF v-if="url && show && !loadingError"
                    ref="pdfRef"
                    :src="url"
                    :showProgress="true"
                    :progressColor="'#1989fa'"
                    :showPageTooltip="true"
                    :showBackToTopBtn="false"
                    :scrollThreshold="300"
                    :pdfWidth="`${Math.round(100 * zoomLevel)}%`"
                    :rowGap="8"
                    :page="currentPage"
                    :cMapUrl="'https://unpkg.com/pdfjs-dist@3.7.107/cmaps/'"
                    :withCredentials="false"
                    :useSystemFonts="true"
                    :stopAtErrors="false"
                    :disableFontFace="false"
                    :disableRange="false"
                    :disableStream="false"
                    :disableAutoFetch="false"
                    @onProgress="handleProgress"
                    @onComplete="handleComplete"
                    @onScroll="handleScroll"
                    @onPageChange="handlePageChange"
                    @onPdfInit="handlePdfInit"
                    @onError="handlePdfError" />

                <!-- 错误状态显示 -->
                <div v-if="loadingError" class="error-container">
                    <div class="error-content">
                        <van-icon name="warning-o" size="48" color="#ff4444" />
                        <div class="error-title">加载失败</div>
                        <div class="error-message">{{ errorMessage }}</div>
                        <van-button type="primary" size="small" @click="retryLoad" class="retry-btn">
                            重新加载
                        </van-button>
                    </div>
                </div>
            </div>

            <!-- 已移除顶部关闭按钮，关闭功能迁移至控制栏 -->

            <!-- 缩放控制按钮 -->
            <div v-if="!loading && !loadingError" class="zoom-controls">
                <van-button class="zoom-btn zoom-close-btn" type="default" icon="cross" round @click="handleClose" />
                <!-- <van-button class="zoom-btn zoom-in-btn" type="default" icon="plus" round @click="zoomIn" /> -->
                <font-awesome-icon icon="magnifying-glass-plus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomIn" />
                <div class="page-jump" @click="focusPageInput">
                    <span class="page-display">{{ currentPage }}/{{ totalPages || 0 }}</span>
                    <input
                        ref="pageInputRef"
                        class="page-input"
                        type="number"
                        :min="1"
                        :max="totalPages || 1"
                        v-model="pageInput"
                        @blur="handlePageInputBlur"
                        @keyup.enter="handlePageInputBlur"
                        v-show="isEditingPage"
                    />
                </div>
                <!-- <van-button class="zoom-btn zoom-out-btn" type="default" icon="minus" round @click="zoomOut" /> -->
                <font-awesome-icon icon="magnifying-glass-minus" class="text-2xl text-gray-600 ml-2 mr-2" @click="zoomOut" />
                <van-button class="zoom-btn zoom-reset-btn" type="default" round @click="resetZoom">
                    <van-icon name="replay" size="16" />
                </van-button>
            </div>

            <!-- 加载遮罩 -->
            <van-overlay :show="loading && !loadingError">
                <div class="wrapper" @click.stop>
                    <div class="loading-content">
                        <!-- 进度环形图 -->
                        <div class="progress-circle">
                            <div class="progress-percent">{{ loadingProgress }}%</div>
                        </div>

                        <!-- 加载文字 -->
                        <div class="loading-text">
                            <div class="loading-title">{{ title }}</div>
                            <div class="loading-subtitle">
                                {{ loadingProgress < 10 ? '正在连接服务器...' : loadingProgress < 50 ? '正在下载文件...' :
                                    loadingProgress < 90 ? '正在解析文档...' : '即将完成...' }} </div>
                            </div>
                        </div>
                    </div>
            </van-overlay>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, watch, nextTick, onUnmounted } from 'vue';
import PDF from "pdf-vue3";

/**
 * 组件属性定义
 */
const props = defineProps({
    // 是否显示弹窗
    show: {
        type: Boolean,
        default: false
    },
    // PDF文件URL
    url: {
        type: String,
        default: ''
    },
    // PDF标题
    title: {
        type: String,
        default: ''
    },
    // 是否防止保存（禁用右键、长按等）
    preventSave: {
        type: Boolean,
        default: true
    }
});

/**
 * 事件定义
 */
const emit = defineEmits(['update:show', 'onLoad', 'onProgress', 'onComplete', 'onClose', 'onDestroy']);

// 响应式数据
const loading = ref(true);
const loadingProgress = ref(0);
const loadingError = ref(false);
const errorMessage = ref('');
const zoomLevel = ref(1); // 缩放级别，1为100%
const scrollPosition = ref({ x: 0, y: 0 }); // 记录滚动位置
const pdfRef = ref(null); // PDF组件引用

// 页码控制
const currentPage = ref(1);
const totalPages = ref(0);
const pageInput = ref('');
const isEditingPage = ref(false);
const pageInputRef = ref(null);

/**
 * 处理页码输入框失焦事件
 */
const handlePageInputBlur = () => {
    const inputValue = parseInt(pageInput.value);
    if (!isNaN(inputValue)) {
        const validPage = Math.max(1, Math.min(inputValue, totalPages.value || 1));
        currentPage.value = validPage;
    }
    pageInput.value = '';
    isEditingPage.value = false;
};

/**
 * 点击页码显示区域，切换到编辑模式
 */
const focusPageInput = () => {
    if (!isEditingPage.value) {
        isEditingPage.value = true;
        pageInput.value = currentPage.value.toString();
        nextTick(() => {
            if (pageInputRef.value) {
                pageInputRef.value.focus();
                pageInputRef.value.select();
            }
        });
    }
};

// 超时处理相关
const loadingTimeout = ref(30000); // 超时时间，默认30秒
const timeoutTimer = ref(null); // 超时计时器
const lastProgressTime = ref(0); // 最后一次进度更新时间
const progressCheckInterval = ref(null); // 进度检查间隔器

/**
 * 监听show属性变化，控制PDF加载
 */
watch(() => props.show, (newVal) => {
    if (newVal && props.url) {
        // 重置所有状态
        clearAllTimers(); // 清除之前的计时器
        loading.value = true;
        loadingError.value = false;
        loadingProgress.value = 0;
        errorMessage.value = '';
        zoomLevel.value = 1; // 重置缩放级别
    } else if (!newVal) {
        // 弹窗关闭时重置状态并清理资源
        clearAllTimers(); // 清除计时器

        // 延迟清理，确保PDF组件有时间完成内部清理
        setTimeout(() => {
            loading.value = false;
            loadingError.value = false;
            loadingProgress.value = 0;
            errorMessage.value = '';
            zoomLevel.value = 1; // 重置缩放级别
            scrollPosition.value = { x: 0, y: 0 }; // 重置滚动位置

            // 触发关闭销毁事件，通知父组件清理引用
            emit('onClose');
        }, 100); // 100ms延迟，给PDF组件时间清理
    }
});

/**
 * 监听URL变化，重新加载PDF
 */
watch(() => props.url, (newUrl) => {
    if (newUrl && props.show) {
        // URL变化时重置状态
        clearAllTimers(); // 清除之前的计时器
        loading.value = true;
        loadingError.value = false;
        loadingProgress.value = 0;
        errorMessage.value = '';
        zoomLevel.value = 1; // 重置缩放级别
    }
});

/**
 * 处理PDF下载进度
 * @param {number} loadRatio - 加载进度 0-100
 */
const handleProgress = (loadRatio) => {
    loadingProgress.value = Math.round(loadRatio);
    // 更新最后进度时间
    lastProgressTime.value = Date.now();
    emit('onProgress', loadRatio);
};

/**
 * 处理PDF下载完成
 */
const handleComplete = () => {
    // 清除所有计时器
    clearAllTimers();
    loading.value = false;
    loadingError.value = false;
    loadingProgress.value = 100;
    emit('onLoad', false);
    emit('onComplete');
};

/**
 * 清除所有计时器
 */
const clearAllTimers = () => {
    if (timeoutTimer.value) {
        clearTimeout(timeoutTimer.value);
        timeoutTimer.value = null;
    }
    if (progressCheckInterval.value) {
        clearInterval(progressCheckInterval.value);
        progressCheckInterval.value = null;
    }
};

/**
 * 启动超时监控
 */
const startTimeoutMonitoring = () => {
    // 清除之前的计时器
    clearAllTimers();

    // 记录开始时间
    lastProgressTime.value = Date.now();

    // 启动进度检查间隔器，每5秒检查一次
    progressCheckInterval.value = setInterval(() => {
        const now = Date.now();
        const timeSinceLastProgress = now - lastProgressTime.value;

        // 如果超过设定的超时时间且进度没有变化，则触发超时
        if (timeSinceLastProgress > loadingTimeout.value && loading.value) {
            clearAllTimers();
            loadingError.value = true;
            errorMessage.value = 'PDF加载超时，请检查网络连接或文件是否存在';
            loading.value = false;
        }
    }, 5000); // 每5秒检查一次

    // 设置总体超时计时器（作为备用）
    timeoutTimer.value = setTimeout(() => {
        if (loading.value) {
            clearAllTimers();
            loadingError.value = true;
            errorMessage.value = 'PDF加载超时，请检查网络连接或文件是否存在';
            loading.value = false;
        }
    }, loadingTimeout.value + 5000); // 比进度检查多5秒作为缓冲
};
const handleScroll = (scrollOffset) => {
    // 记录当前滚动位置
    const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
    if (pdfContainer) {
        scrollPosition.value = {
            x: pdfContainer.scrollLeft,
            y: pdfContainer.scrollTop
        };
    }
};

/**
 * 处理页面变化事件
 * @param {number} page - 当前页码
 */
const handlePageChange = (page) => {
    const p = Number(page) || 1;
    currentPage.value = p;
};

/**
 * 处理PDF初始化完成
 * @param {Object} pdf - PDF文档对象
 */
const handlePdfInit = (pdf) => {
    // 启动超时监控
    startTimeoutMonitoring();

    // PDF初始化完成后的处理
    loadingError.value = false;

    // 记录总页数
    try {
        const num = (pdf && typeof pdf.numPages === 'number') ? pdf.numPages : 0;
        if (num > 0) {
            totalPages.value = num;
            if (currentPage.value > num) currentPage.value = num;
        }
    } catch (e) {
        // 忽略无法获取页数的情况
    }

    nextTick(() => {
        if (props.preventSave) {
            // 添加防止保存的事件监听器
            addPreventSaveListeners();
        }
    });
};

/**
 * 处理PDF加载错误
 * @param {Error} error - 错误对象
 */
const handlePdfError = (error) => {
    console.error('PDF加载失败:', error);
    loading.value = false;
    loadingError.value = true;
    loadingProgress.value = 0;

    // 根据错误类型设置不同的错误信息
    if (error.name === 'NetworkError' || error.message.includes('network')) {
        errorMessage.value = '网络连接失败，请检查网络后重试';
    } else if (error.name === 'InvalidPDFException' || error.message.includes('Invalid PDF')) {
        errorMessage.value = 'PDF文件格式错误或已损坏';
    } else if (error.message.includes('404') || error.message.includes('Not Found')) {
        errorMessage.value = '文件不存在或已被删除';
    } else if (error.message.includes('403') || error.message.includes('Forbidden')) {
        errorMessage.value = '没有权限访问此文件';
    } else {
        errorMessage.value = '文件加载失败，请重试';
    }
};

/**
 * 重试加载PDF
 */
const retryLoad = () => {
    clearAllTimers(); // 清除之前的计时器
    loadingError.value = false;
    loading.value = true;
    loadingProgress.value = 0;
    errorMessage.value = '';
    zoomLevel.value = 1; // 重置缩放级别
};

/**
 * 处理关闭弹窗
 */
const handleClose = () => {
    // 先清理所有计时器
    clearAllTimers();

    // 如果PDF组件存在，尝试清理其内部状态
    if (pdfRef.value && typeof pdfRef.value.destroy === 'function') {
        try {
            pdfRef.value.destroy();
        } catch (error) {
            console.warn('PDF组件销毁时出现警告:', error);
        }
    }

    // 使用nextTick确保在DOM更新前完成清理
    nextTick(() => {
        emit('onClose', true);
    });
};

/**
 * 放大PDF
 */
const zoomIn = () => {
    if (zoomLevel.value < 3) { // 最大放大到300%
        const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
        if (pdfContainer) {
            const oldW = pdfContainer.scrollWidth;
            const oldH = pdfContainer.scrollHeight;
            const viewportW = pdfContainer.clientWidth;
            const viewportH = pdfContainer.clientHeight;

            const centerX = pdfContainer.scrollLeft + viewportW / 2;
            const centerY = pdfContainer.scrollTop + viewportH / 2;

            const anchorRatioX = oldW > 0 ? centerX / oldW : 0;
            const anchorRatioY = oldH > 0 ? centerY / oldH : 0;

            zoomLevel.value = Math.min(3, zoomLevel.value + 0.25);

            nextTick(() => {
                const newW = pdfContainer.scrollWidth;
                const newH = pdfContainer.scrollHeight;

                let targetCenterX = newW * anchorRatioX;
                let targetCenterY = newH * anchorRatioY;

                let newScrollLeft = Math.max(0, targetCenterX - viewportW / 2);
                let newScrollTop = Math.max(0, targetCenterY - viewportH / 2);

                newScrollLeft = Math.min(newScrollLeft, Math.max(0, newW - viewportW));
                newScrollTop = Math.min(newScrollTop, Math.max(0, newH - viewportH));

                // 直接赋值避免平滑滚动导致的偏移抖动
                pdfContainer.scrollLeft = newScrollLeft;
                pdfContainer.scrollTop = newScrollTop;
            });
        } else {
            zoomLevel.value = Math.min(3, zoomLevel.value + 0.25);
        }
    }
};

/**
 * 缩小PDF
 */
const zoomOut = () => {
    if (zoomLevel.value > 0.5) { // 最小缩小到50%
        const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
        if (pdfContainer) {
            const oldW = pdfContainer.scrollWidth;
            const oldH = pdfContainer.scrollHeight;
            const viewportW = pdfContainer.clientWidth;
            const viewportH = pdfContainer.clientHeight;

            const centerX = pdfContainer.scrollLeft + viewportW / 2;
            const centerY = pdfContainer.scrollTop + viewportH / 2;

            const anchorRatioX = oldW > 0 ? centerX / oldW : 0;
            const anchorRatioY = oldH > 0 ? centerY / oldH : 0;

            zoomLevel.value = Math.max(0.5, zoomLevel.value - 0.25);

            nextTick(() => {
                const newW = pdfContainer.scrollWidth;
                const newH = pdfContainer.scrollHeight;

                let targetCenterX = newW * anchorRatioX;
                let targetCenterY = newH * anchorRatioY;

                let newScrollLeft = Math.max(0, targetCenterX - viewportW / 2);
                let newScrollTop = Math.max(0, targetCenterY - viewportH / 2);

                newScrollLeft = Math.min(newScrollLeft, Math.max(0, newW - viewportW));
                newScrollTop = Math.min(newScrollTop, Math.max(0, newH - viewportH));

                pdfContainer.scrollLeft = newScrollLeft;
                pdfContainer.scrollTop = newScrollTop;
            });
        } else {
            zoomLevel.value = Math.max(0.5, zoomLevel.value - 0.25);
        }
    }
};

/**
 * 重置缩放
 */
const resetZoom = () => {
    const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
    if (pdfContainer) {
        zoomLevel.value = 1;
        nextTick(() => {
            pdfContainer.scrollLeft = 0;
            pdfContainer.scrollTop = 0;
        });
    } else {
        zoomLevel.value = 1;
    }
};

/**
 * 添加防止保存的事件监听器
 */
const addPreventSaveListeners = () => {
    const pdfContainer = document.querySelector('.pdf-viewer-container .pdf-content');
    if (pdfContainer) {
        // 防止上下文菜单（右键菜单）
        pdfContainer.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            return false;
        });

        // 防止长按选择
        pdfContainer.addEventListener('selectstart', (e) => {
            e.preventDefault();
            return false;
        });

        // 防止拖拽
        pdfContainer.addEventListener('dragstart', (e) => {
            e.preventDefault();
            return false;
        });

        // 添加双指缩放手势支持
        addPinchZoomListeners(pdfContainer);
    }
};

// 双指缩放相关变量
let initialDistance = 0;
let initialZoom = 1;
let isZooming = false;

/**
 * 添加双指缩放手势监听器
 */
const addPinchZoomListeners = (container) => {
    let touches = [];

    // 计算两点间距离
    const getDistance = (touch1, touch2) => {
        const dx = touch1.clientX - touch2.clientX;
        const dy = touch1.clientY - touch2.clientY;
        return Math.sqrt(dx * dx + dy * dy);
    };

    // 获取两点中心位置
    const getCenter = (touch1, touch2) => {
        return {
            x: (touch1.clientX + touch2.clientX) / 2,
            y: (touch1.clientY + touch2.clientY) / 2
        };
    };

    // 触摸开始
    container.addEventListener('touchstart', (e) => {
        touches = Array.from(e.touches);

        if (touches.length === 2) {
            // 双指触摸开始
            e.preventDefault();
            isZooming = true;
            initialDistance = getDistance(touches[0], touches[1]);
            initialZoom = zoomLevel.value;
        } else if (touches.length > 2) {
            // 超过两指时阻止默认行为
            e.preventDefault();
        }
    }, { passive: false });

    // 触摸移动
    container.addEventListener('touchmove', (e) => {
        if (e.touches.length === 2 && isZooming) {
            e.preventDefault();

            const currentTouches = Array.from(e.touches);
            const currentDistance = getDistance(currentTouches[0], currentTouches[1]);
            const scale = currentDistance / initialDistance;

            // 计算新的缩放级别
            let newZoom = initialZoom * scale;
            newZoom = Math.max(0.5, Math.min(3, newZoom)); // 限制缩放范围

            // 获取缩放中心点
            const center = getCenter(currentTouches[0], currentTouches[1]);
            const rect = container.getBoundingClientRect();
            const centerX = center.x - rect.left;
            const centerY = center.y - rect.top;

            // 应用缩放
            applyPinchZoom(newZoom, centerX, centerY, container);
        }
    }, { passive: false });

    // 触摸结束
    container.addEventListener('touchend', (e) => {
        if (isZooming && e.touches.length < 2) {
            isZooming = false;
            initialDistance = 0;
            initialZoom = zoomLevel.value;
        }
    });

    // 触摸取消
    container.addEventListener('touchcancel', (e) => {
        isZooming = false;
        initialDistance = 0;
        initialZoom = zoomLevel.value;
    });
};

/**
 * 应用双指缩放
 */
const applyPinchZoom = (newZoom, centerX, centerY, container) => {
    const oldZoom = zoomLevel.value;
    const oldScrollLeft = container.scrollLeft;
    const oldScrollTop = container.scrollTop;

    // 更新缩放级别
    zoomLevel.value = newZoom;

    // 等待DOM更新后调整滚动位置
    nextTick(() => {
        const zoomRatio = newZoom / oldZoom;

        // 计算新的滚动位置，以缩放中心为锚点
        const newScrollLeft = (oldScrollLeft + centerX) * zoomRatio - centerX;
        const newScrollTop = (oldScrollTop + centerY) * zoomRatio - centerY;

        // 应用新的滚动位置
        container.scrollLeft = Math.max(0, newScrollLeft);
        container.scrollTop = Math.max(0, newScrollTop);
    });
};
</script>

<style scoped>
.pdf-viewer-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #f5f5f5;
}

.pdf-content {
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* 防止PDF内容被选择和保存的样式 */
.pdf-no-select {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-tap-highlight-color: transparent;
    /* 移除点击高亮 */
    pointer-events: auto;
    /* 保持可点击 */
}

/* 深度选择器，防止PDF内部元素被保存 */
:deep(.pdf-no-select img) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
    /* 禁用图片的所有交互 */
    -webkit-user-drag: none;
    /* 禁止拖拽 */
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 防止Canvas元素被保存 */
:deep(.pdf-no-select canvas) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 关闭按钮样式 */
.close-btn {
    position: fixed;
    left: 20px;
    bottom: 40px;
    z-index: 100;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

/* 缩放控制按钮样式 */
.zoom-controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.95);
    padding: 12px 20px;
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.zoom-controls:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%) translateY(-2px);
}

.zoom-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e8e8e8;
    color: #333;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.zoom-btn:hover {
    background: #4caf50;
    color: #fff;
    border-color: #4caf50;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
}

.zoom-btn:active {
    transform: scale(0.95);
}

.zoom-level {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
    min-width: 50px;
    padding: 8px 12px;
    background: rgba(25, 137, 250, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(25, 137, 250, 0.2);
}

/* 加载遮罩样式 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

/* 加载内容样式 */
.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.progress-circle {
    width: 80px;
    height: 80px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-percent {
    font-size: 18px;
    font-weight: bold;
    color: #4caf50;
}

.loading-text {
    max-width: 200px;
}

.loading-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #fff;
}

.loading-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.page-jump {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    min-width: 60px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    padding: 0 12px;
}

.page-display {
    color: white;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    user-select: none;
}

.page-input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #4caf50;
    border-radius: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    outline: none;
}

.page-input::-webkit-outer-spin-button,
.page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-input[type=number] {
    -moz-appearance: textfield;
}

.page-jump:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* 错误状态样式 */
.error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f8f9fa;
}

.error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    max-width: 300px;
}

.error-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 16px 0 8px 0;
}

.error-message {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.retry-btn {
    min-width: 100px;
}
</style>