<!-- 指纹登录 - 深色科技风格 -->
<template>
  <div class="fingerprint-login-page">
    <!-- 指纹主题超炫酷科技背景 -->
    <div class="bg-layer" />
    
    <!-- 指纹扫描环形背景 -->
    <div class="fingerprint-rings">
      <div class="fp-ring ring-1" />
      <div class="fp-ring ring-2" />
      <div class="fp-ring ring-3" />
      <div class="fp-ring ring-4" />
      <div class="fp-ring ring-5" />
    </div>
    
    <!-- 生物识别数据流 -->
    <div class="biometric-data">
      <div class="data-stream stream-1" />
      <div class="data-stream stream-2" />
      <div class="data-stream stream-3" />
      <div class="data-stream stream-4" />
    </div>
    
    <!-- 雷达扫描效果 -->
    <div class="radar-scan">
      <div class="radar-sweep" />
      <div class="radar-grid" />
    </div>
    
    <!-- 霓虹指纹脊线装饰 -->
    <div class="neon-ridges">
      <div class="neon-ridge ridge-a" />
      <div class="neon-ridge ridge-b" />
      <div class="neon-ridge ridge-c" />
      <div class="neon-ridge ridge-d" />
    </div>
    
    <!-- 数字雨效果（指纹主题） -->
    <div class="fp-digital-rain">
      <div class="digital-column" style="left: 8%; animation-delay: 0s;" />
      <div class="digital-column" style="left: 22%; animation-delay: 0.8s;" />
      <div class="digital-column" style="left: 38%; animation-delay: 1.6s;" />
      <div class="digital-column" style="left: 52%; animation-delay: 2.4s;" />
      <div class="digital-column" style="left: 68%; animation-delay: 3.2s;" />
      <div class="digital-column" style="left: 84%; animation-delay: 4s;" />
    </div>
    
    <!-- 动态渐变背景 -->
    <div class="gradient-bg">
      <div class="gradient-orb gradient-orb-1" />
      <div class="gradient-orb gradient-orb-2" />
      <div class="gradient-orb gradient-orb-3" />
      <div class="gradient-orb gradient-orb-4" />
    </div>
    
    <!-- 指纹主题粒子动画 -->
    <div class="fingerprint-particles">
      <div class="fp-particle fp-particle-1" />
      <div class="fp-particle fp-particle-2" />
      <div class="fp-particle fp-particle-3" />
      <div class="fp-particle fp-particle-4" />
      <div class="fp-particle fp-particle-5" />
      <div class="fp-particle fp-particle-6" />
      <div class="fp-particle fp-particle-7" />
      <div class="fp-particle fp-particle-8" />
    </div>
    
    <!-- 动态扫描线 -->
    <div class="scan-bg">
      <div class="scan-wave scan-wave-1" />
      <div class="scan-wave scan-wave-2" />
      <div class="scan-wave scan-wave-3" />
    </div>
    
    <!-- 指纹脊线背景装饰 -->
    <div class="fingerprint-bg-decoration">
      <div class="ridge-line ridge-1" />
      <div class="ridge-line ridge-2" />
      <div class="ridge-line ridge-3" />
      <div class="ridge-line ridge-4" />
    </div>

    <!-- 操作按钮 - 右上角 -->
    <div class="action-buttons-top">
      <button class="action-btn password-btn" @click="goToPasswordLogin">
        <i class="fas fa-key" />
        密码登录
      </button>
      <button class="action-btn restart-btn" @click="handleRestart">
        <i class="fas fa-redo-alt" />
        重启识别
      </button>
    </div>

    <div class="recognize-container">
      <!-- 状态圆形区域 -->
      <div class="status-circle" :class="statusClass">
        <div class="circle-glow" />
        <div class="fingerprint-icon-wrapper">
          <svg class="fingerprint-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <!-- 外侧指纹脊线 -->
            <ellipse
              cx="100" cy="100" rx="85" ry="90" fill="none" stroke="currentColor" stroke-width="2"
              opacity="0.3"
            />
            <ellipse
              cx="100" cy="100" rx="75" ry="80" fill="none" stroke="currentColor" stroke-width="2"
              opacity="0.4"
            />
            <ellipse
              cx="100" cy="100" rx="65" ry="70" fill="none" stroke="currentColor" stroke-width="2"
              opacity="0.5"
            />

            <!-- 内侧指纹脊线 -->
            <path
              d="M100 30 C130 30, 150 50, 150 80 C150 110, 130 130, 100 130 C70 130, 50 110, 50 80 C50 50, 70 30, 100 30"
              fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.6"
            />
            <path
              d="M100 40 C120 40, 135 55, 135 75 C135 95, 120 110, 100 110 C80 110, 65 95, 65 75 C65 55, 80 40, 100 40"
              fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.7"
            />
            <path
              d="M100 50 C110 50, 120 60, 120 70 C120 80, 110 90, 100 90 C90 90, 80 80, 80 70 C80 60, 90 50, 100 50"
              fill="none" stroke="currentColor" stroke-width="2.5" opacity="0.8"
            />

            <!-- 指纹脊线 -->
            <path
              d="M60 60 Q100 40, 140 60" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />
            <path
              d="M65 70 Q100 50, 135 70" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />
            <path
              d="M70 80 Q100 60, 130 80" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />
            <path
              d="M75 90 Q100 70, 125 90" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />
            <path
              d="M80 100 Q100 80, 120 100" fill="none" stroke="currentColor" stroke-width="1.5"
              opacity="0.6"
            />

            <!-- 中央螺旋纹 -->
            <circle
              cx="100" cy="75" r="8" fill="none" stroke="currentColor" stroke-width="2"
              opacity="0.8"
            />
            <circle cx="100" cy="75" r="4" fill="currentColor" opacity="0.6" />
          </svg>

          <!-- 扫描线动画 -->
          <div v-if="status === 'recognizing'" class="scan-line" />
        </div>

        <!-- 成功图标 -->
        <div v-if="status === 'success'" class="success-icon">
          <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
            <circle cx="26" cy="26" r="25" fill="none" />
            <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
          </svg>
        </div>

        <!-- 失败图标 -->
        <div v-if="status === 'failed'" class="failed-icon">
          <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
            <circle cx="26" cy="26" r="25" fill="none" />
            <path fill="none" d="M16 16 36 36 M36 16 16 36" />
          </svg>
        </div>
      </div>

      <!-- 状态文本 -->
      <div class="status-text">
        {{ isConnected ? statusText : '设备未连接' }}
      </div>
    </div>

    <!-- Loading -->
    <div v-if="status === 'recognizing'" class="loading-indicator">
      <span>识别中</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted, onUnmounted } from 'vue';
import { showNotify } from 'vant';
import { queryRemindTime } from '../api/login.js';

// 图片资源
// import bgImg from '../assets/images/bj.png';

const route = useRoute();
const router = useRouter();

// 状态：waiting(等待识别), recognizing(识别中), success(成功), failed(失败)
const userInfo = ref(null);
const status = ref('waiting');
const statusText = ref('');
const isConnected = ref(false);
// 计算状态类名
const statusClass = ref('status-waiting');

// 性能释放相关
const isPageVisible = ref(true);
let visibilityChangeHandler = null;

// 页面可见性变化处理
const handleVisibilityChange = () => {
    isPageVisible.value = !document.hidden;
    const fingerprintPage = document.querySelector('.fingerprint-login-page');
    if (fingerprintPage) {
        if (document.hidden) {
            // 页面不可见时暂停所有动画
            fingerprintPage.style.animationPlayState = 'paused';
            fingerprintPage.querySelectorAll('*').forEach(el => {
                el.style.animationPlayState = 'paused';
            });
        } else {
            // 页面可见时恢复动画
            fingerprintPage.style.animationPlayState = 'running';
            fingerprintPage.querySelectorAll('*').forEach(el => {
                el.style.animationPlayState = 'running';
            });
        }
    }
};

// 更新状态
const updateStatus = (newStatus, text) => {
    status.value = newStatus;
    statusText.value = text;

    switch (newStatus) {
    case 'waiting':
        statusClass.value = 'status-waiting';
        break;
    case 'recognizing':
        statusClass.value = 'status-recognizing';
        break;
    case 'success':
        statusClass.value = 'status-success';
        break;
    case 'failed':
        statusClass.value = 'status-failed';
        break;
    }
};

// 处理指纹响应
const handleFingerprintResponse = data => {
    console.log('接收到指纹设备的响应信息', data);

    if (!data) {
        updateStatus('failed', '识别失败，未接收到数据');
        showNotify({ type: 'danger', message: '识别失败' });
        return;
    }

    const code = data.code;
    const msg = data.message || '';
    const responseData = data.loginInfo;

    if (code === 0) {
        // 有数据说明登录成功
        userInfo.value = responseData;
        if (msg === '连接成功' || msg === '请按下手指') {
            isConnected.value = true;
            updateStatus('recognizing', '请按下手指');
        }
        if (msg === '正在同步指纹，请稍后进行指纹登录') {
            updateStatus('waiting', '正在同步指纹，请稍后进行指纹登录');
        }
        if (responseData) {
            updateStatus('success', '识别成功，登录成功！');
            setTimeout(() => {
                localStorage.setItem('#token', responseData.token);
                localStorage.setItem('#accountId', responseData.accountId);
                localStorage.setItem('#LoginInfo', JSON.stringify(responseData));
                showNotify({ type: 'success', message: '欢迎登录，' + responseData.userName });
                const redirectUrl = window.location.href.split('redirectUrl=')[1];

                if (redirectUrl) {
                    window.location = decodeURIComponent(redirectUrl);
                } else {
                    router.push('/home');
                }
                checkPasswordReminder();
            }, 1000);
        }
    } else {
        if (msg === '连接失败') {
            isConnected.value = false;
        } else {
            updateStatus('failed', msg || '识别失败，请重试');
        }
    }
};

// 开始识别
const startRecognize = () => {
    if (!plugin.fingerprintConfig) {
        updateStatus('failed', '指纹设备插件未就绪');
        showNotify({ type: 'danger', message: '设备不支持指纹识别功能' });
        return;
    }

    try {
        plugin.fingerprintConfig.recognize();
    } catch (error) {
        console.error('启动指纹识别失败', error);
        updateStatus('failed', '启动识别失败');
        showNotify({ type: 'danger', message: '启动识别失败' });
    }
};

// 重启指纹识别
const handleRestart = () => {
    userInfo.value = null;
    isConnected.value = true;
    updateStatus('waiting', '指纹重启中，请稍后...');

    setTimeout(() => {
        // startRecognize();
        // updateStatus('recognizing', '请按下手指');

        if (plugin.fingerprintConfig) {
            plugin.fingerprintConfig.receiveFingerprintResponse = () => { };
            plugin.fingerprintConfig.disableConnect();
            plugin.fingerprintConfig.connect();
            plugin.fingerprintConfig.receiveFingerprintResponse = handleFingerprintResponse;
            setTimeout(() => {
                startRecognize();
            }, 500);
        }
    }, 1000);
};

// 跳转到密码登录页面
const goToPasswordLogin = () => {
    // const isOut = localStorage.getItem('isOut') === 'true';
    // if (isOut) {
    //     router.push({ path: '/login', query: { isOut: 'true' } });
    // } else {
    //     router.push('/login');
    // }

    router.push('/login');
};

const checkPasswordReminder = async () => {
    try {
        const res = await queryRemindTime();
        if (res.errorCode === 0) {
            if (res.data === true) {
                setTimeout(() => {
                    showNotify({ type: 'danger', message: res.errorMessage });
                }, 4000);
            }
        } else {
            showNotify({ type: 'danger', message: res.errorMessage });
        }
    } catch (error) {
        console.error('提示修改密码Api调用失败', error);
        showNotify({ type: 'danger', message: '提示修改密码Api调用失败' });
    }
};

// 组件挂载
onMounted(() => {
    // 添加页面可见性监听器
    visibilityChangeHandler = handleVisibilityChange;
    document.addEventListener('visibilitychange', visibilityChangeHandler);
    
    // 检查URL参数中是否包含isOut=true，如果有则存储到localStorage
    // const isOutParam = route.query.isOut;
    // if (isOutParam !== undefined) {
    //     const isOutValue = String(isOutParam) === 'true' ? 'true' : 'false';
    //     if (isOutValue == 'true') {
    //         localStorage.setItem('isOut', isOutValue);
    //     } else {
    //         localStorage.setItem('isOut', isOutValue);
    //     }
    // } else {
    //     localStorage.setItem('isOut', 'false');
    // }

    // 设置指纹设备的响应处理函数
    if (plugin.fingerprintConfig) {
        plugin.fingerprintConfig.connect();
        plugin.fingerprintConfig.receiveFingerprintResponse = handleFingerprintResponse;
    }

    // 延迟500ms后开始识别
    setTimeout(() => {
        startRecognize();
    }, 500);
});

// 组件卸载
onUnmounted(() => {
    // 移除页面可见性监听器
    if (visibilityChangeHandler) {
        document.removeEventListener('visibilitychange', visibilityChangeHandler);
        visibilityChangeHandler = null;
    }
    
    // 暂停所有动画以释放性能
    const fingerprintPage = document.querySelector('.fingerprint-login-page');
    if (fingerprintPage) {
        fingerprintPage.style.animationPlayState = 'paused';
        fingerprintPage.querySelectorAll('*').forEach(el => {
            el.style.animationPlayState = 'paused';
        });
    }
    
    // 清理响应处理函数
    if (plugin.fingerprintConfig) {
        plugin.fingerprintConfig.receiveFingerprintResponse = () => { };
        plugin.fingerprintConfig.disableConnect();
    }
});
</script>

<style scoped>
/* 指纹登录页面 - 深色科技风格 */
.fingerprint-login-page {
    width: 100%;
    min-height: 100vh;
    position: relative;
    font-family: 'Microsoft YaHei', sans-serif;
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 指纹主题炫酷科技背景 */
.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(0, 180, 255, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 220, 255, 0.04) 0%, transparent 60%),
        conic-gradient(from 0deg at 50% 50%, #0a1a2e 0deg, #0a2a4a 60deg, #0a3a5a 120deg, #0a2a4a 180deg, #0a1a2e 240deg, #0a2a4a 300deg, #0a1a2e 360deg);
    background-size: 100% 100%, 150% 150%, 120% 120%, 100% 100%;
    animation: fpBgShift 25s ease-in-out infinite;
    z-index: 0;
}

@keyframes fpBgShift {
    0%, 100% { 
        background-position: 50% 50%, 20% 80%, 80% 20%, 0% 0%; 
        filter: hue-rotate(0deg);
    }
    25% { 
        background-position: 60% 40%, 30% 70%, 70% 30%, 10% 10%; 
        filter: hue-rotate(30deg);
    }
    50% { 
        background-position: 40% 60%, 10% 90%, 90% 10%, 20% 20%; 
        filter: hue-rotate(60deg);
    }
    75% { 
        background-position: 55% 45%, 25% 75%, 75% 25%, 15% 15%; 
        filter: hue-rotate(30deg);
    }
}

/* 增强的背景动画网格 */
.fingerprint-login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(30, 144, 255, 0.15) 1px, transparent 0),
        linear-gradient(rgba(30, 144, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 144, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px, 30px 30px, 30px 30px;
    z-index: 1;
    pointer-events: none;
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* 动态渐变背景 */
.gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: orbFloat 12s ease-in-out infinite;
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gradient-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(30, 144, 255, 0.25) 0%, transparent 70%);
    top: 15%;
    left: 25%;
    animation-delay: 0s;
}

.gradient-orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 191, 255, 0.2) 0%, transparent 70%);
    bottom: 25%;
    right: 20%;
    animation-delay: 4s;
}

.gradient-orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(135, 206, 250, 0.15) 0%, transparent 70%);
    top: 50%;
    left: 70%;
    animation-delay: 8s;
}

.gradient-orb-4 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(0, 206, 209, 0.1) 0%, transparent 70%);
    top: 70%;
    left: 10%;
    animation-delay: 6s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0.6;
    }
    33% {
        transform: translate(30px, -40px) scale(1.1) rotate(120deg);
        opacity: 0.9;
    }
    66% {
        transform: translate(-40px, 30px) scale(0.8) rotate(240deg);
        opacity: 0.4;
    }
}

/* 指纹主题粒子动画 */
.fingerprint-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.fp-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 144, 255, 0.9) 0%, rgba(30, 144, 255, 0.3) 40%, transparent 100%);
    animation: fpParticleMove 15s linear infinite;
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.fp-particle-1 {
    width: 8px;
    height: 8px;
    left: 20%;
    animation-delay: 0s;
    animation-duration: 12s;
}

.fp-particle-2 {
    width: 6px;
    height: 6px;
    left: 80%;
    animation-delay: 3s;
    animation-duration: 14s;
}

.fp-particle-3 {
    width: 10px;
    height: 10px;
    left: 60%;
    animation-delay: 6s;
    animation-duration: 10s;
}

.fp-particle-4 {
    width: 5px;
    height: 5px;
    left: 40%;
    animation-delay: 2s;
    animation-duration: 16s;
}

.fp-particle-5 {
    width: 7px;
    height: 7px;
    left: 10%;
    animation-delay: 5s;
    animation-duration: 13s;
}

.fp-particle-6 {
    width: 9px;
    height: 9px;
    left: 90%;
    animation-delay: 8s;
    animation-duration: 11s;
}

.fp-particle-7 {
    width: 4px;
    height: 4px;
    left: 70%;
    animation-delay: 1s;
    animation-duration: 15s;
}

.fp-particle-8 {
    width: 6px;
    height: 6px;
    left: 30%;
    animation-delay: 7s;
    animation-duration: 9s;
}

@keyframes fpParticleMove {
    0% {
        transform: translateY(110vh) translateX(-20px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
        transform: translateY(50vh) translateX(20px) rotate(180deg);
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-10vh) translateX(40px) rotate(360deg);
        opacity: 0;
    }
}

/* 动态扫描线 */
.scan-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.scan-wave {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 191, 255, 0.6) 20%, rgba(30, 144, 255, 0.8) 50%, rgba(0, 191, 255, 0.6) 80%, transparent 100%);
    animation: scanMove 10s ease-in-out infinite;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.scan-wave-1 {
    animation-delay: 0s;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 191, 255, 0.8) 50%, transparent 100%);
}

.scan-wave-2 {
    animation-delay: 2s;
    background: linear-gradient(90deg, transparent 0%, rgba(30, 144, 255, 0.6) 50%, transparent 100%);
}

.scan-wave-3 {
    animation-delay: 4s;
    background: linear-gradient(90deg, transparent 0%, rgba(135, 206, 250, 0.4) 50%, transparent 100%);
}

@keyframes scanMove {
    0% {
        top: -5px;
        opacity: 0;
        transform: scaleX(0.5);
    }
    20% {
        opacity: 1;
        transform: scaleX(1);
    }
    80% {
        opacity: 0.8;
        transform: scaleX(1.2);
    }
    100% {
        top: 105%;
        opacity: 0;
        transform: scaleX(0.3);
    }
}

/* 指纹脊线背景装饰 */
.fingerprint-bg-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.ridge-line {
    position: absolute;
    border: 1px solid rgba(30, 144, 255, 0.1);
    border-radius: 50%;
    animation: ridgeExpand 8s ease-in-out infinite;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.ridge-1 {
    width: 150px;
    height: 150px;
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.ridge-2 {
    width: 200px;
    height: 200px;
    bottom: 30%;
    right: 25%;
    animation-delay: 2s;
}

.ridge-3 {
    width: 100px;
    height: 100px;
    top: 60%;
    left: 70%;
    animation-delay: 4s;
}

.ridge-4 {
    width: 120px;
    height: 120px;
    top: 80%;
    left: 40%;
    animation-delay: 6s;
}

@keyframes ridgeExpand {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.1;
        border-color: rgba(30, 144, 255, 0.1);
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0.3;
        border-color: rgba(30, 144, 255, 0.3);
    }
}

.recognize-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 500px;
    width: 90%;
}

/* 状态圆形 */
.status-circle {
    position: relative;
    width: clamp(250px, 40vw, 350px);
    height: clamp(250px, 40vw, 350px);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(9, 45, 82, 0.95) 0%, rgba(5, 30, 60, 0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(30, 144, 255, 0.3);
    transition: all 0.5s ease;
    overflow: hidden;
    border: 2px solid rgba(30, 144, 255, 0.3);
}

.circle-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 等待状态 */
.status-waiting {
    border: 2px solid rgba(30, 144, 255, 0.3);
}

.status-waiting .circle-glow {
    background: radial-gradient(circle, rgba(30, 144, 255, 0.2) 0%, transparent 70%);
    opacity: 0.5;
}

/* 识别中状态 */
.status-recognizing {
    border: 2px solid #1e90ff;
    animation: circlePulse 2s infinite;
}

.status-recognizing .circle-glow {
    background: radial-gradient(circle, rgba(30, 144, 255, 0.4) 0%, transparent 70%);
    opacity: 1;
    animation: glowPulse 2s infinite;
}

@keyframes circlePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(30, 144, 255, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 25px 70px rgba(30, 144, 255, 0.5), 0 0 60px rgba(30, 144, 255, 0.4);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

/* 成功状态 */
.status-success {
    border: 4px solid #10b981;
    background: rgba(16, 185, 129, 0.1);
    animation: successBounce 0.6s ease;
}

.status-success .circle-glow {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
    opacity: 1;
}

@keyframes successBounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* 失败状态 */
.status-failed {
    border: 4px solid #ef4444;
    animation: shake 0.5s ease;
}

.status-failed .circle-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
    opacity: 1;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

/* 指纹图标 */
.fingerprint-icon-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fingerprint-svg {
    width: 60%;
    height: 60%;
    color: #9ca3af;
    transition: color 0.5s ease;
}

.status-waiting .fingerprint-svg {
    color: rgba(30, 144, 255, 0.5);
}

.status-recognizing .fingerprint-svg {
    color: #1e90ff;
}

.status-success .fingerprint-svg {
    color: #10b981;
    opacity: 0.3;
}

.status-failed .fingerprint-svg {
    color: #ef4444;
    opacity: 0.3;
}

/* 扫描线动画 */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00bfff, transparent);
    animation: scanning 2s linear infinite;
}

@keyframes scanning {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(clamp(250px, 40vw, 350px));
    }
}

/* 成功图标 */
.success-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    animation: iconAppear 0.5s ease forwards;
}

.success-icon svg {
    width: 100%;
    height: 100%;
}

.success-icon circle {
    stroke: #10b981;
    stroke-width: 3;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: checkmarkCircle 0.6s ease-in-out forwards;
}

.success-icon path {
    stroke: #10b981;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkmark 0.3s 0.3s ease-in-out forwards;
}

@keyframes iconAppear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes checkmarkCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark {
    to {
        stroke-dashoffset: 0;
    }
}

/* 失败图标 */
.failed-icon {
    position: absolute;
    width: 50%;
    height: 50%;
    animation: iconAppear 0.5s ease forwards;
}

.failed-icon svg {
    width: 100%;
    height: 100%;
}

.failed-icon circle {
    stroke: #ef4444;
    stroke-width: 3;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: checkmarkCircle 0.6s ease-in-out forwards;
}

.failed-icon path {
    stroke: #ef4444;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: crossmark 0.3s 0.3s ease-in-out forwards;
}

@keyframes crossmark {
    to {
        stroke-dashoffset: 0;
    }
}

/* 状态文本 */
.status-text {
    font-size: 4rem;
    color: white;
    text-align: center;
    font-weight: 700;
    max-width: clamp(250px, 50vw, 400px);
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
}

@keyframes textFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 用户信息卡片 */
.user-info {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.5s ease;
    width: 100%;
    max-width: 400px;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.user-details {
    flex: 1;
}

.user-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.user-role {
    font-size: 1rem;
    color: #6b7280;
}

/* 操作按钮 */
.action-buttons {
    display: none;
}

/* 操作按钮 - 右上角定位 */
.action-buttons-top {
    position: absolute;
    top: clamp(1rem, 2vh, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    z-index: 100;
    animation: textFadeIn 0.5s ease;
}

.action-btn {
    font-size: 1rem;
    font-weight: 500;
    height: 44px;
    padding: 0 20px;
    border-radius: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn i {
    margin-right: 8px;
    font-size: 16px;
}

/* 密码登录按钮样式 */
.password-btn {
    background: linear-gradient(90deg, #1e90ff 0%, #00bfff 100%);
    border: none;
    color: white;
}

.password-btn:hover {
    box-shadow: 0 0 20px rgba(30, 144, 255, 0.5);
    transform: translateY(-2px);
}

/* 重启按钮样式 */
.restart-btn {
    background: transparent;
    border: 1px solid rgba(30, 144, 255, 0.5);
    color: #7ec8ff;
}

.restart-btn:hover {
    background: rgba(30, 144, 255, 0.1);
    border-color: #1e90ff;
    color: #00bfff;
}

/* Loading */
.loading-indicator {
    position: absolute;
    bottom: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.loading-indicator span {
    color: #7ec8ff;
    font-size: 1.2rem;
    animation: blink 1.5s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* 性能优化 - 减少动画支持 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .gradient-orb,
    .fp-particle,
    .scan-wave,
    .ridge-line,
    .status-circle {
        animation: none !important;
    }
}

/* 低性能设备优化 */
@media (max-width: 768px) {
    .gradient-orb {
        filter: blur(60px);
        animation-duration: 16s;
    }
    
    .fp-particle {
        animation-duration: 18s;
    }
    
    .fingerprint-particles .fp-particle:nth-child(n+5) {
        display: none;
    }
    
    .scan-bg .scan-wave:nth-child(n+3) {
        display: none;
    }
}

@media (max-width: 480px) {
    .gradient-orb-3,
    .gradient-orb-4,
    .ridge-line {
        display: none;
    }
    
    .fingerprint-particles .fp-particle:nth-child(n+4) {
        display: none;
    }
    
    .scan-bg .scan-wave:nth-child(n+2) {
        display: none;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .action-buttons {
        display: none;
        padding: 0 1rem;
    }
    
    .status-circle {
        width: clamp(200px, 35vw, 280px);
        height: clamp(200px, 35vw, 280px);
    }
}

/* 高刷新率设备优化 */
@media (min-resolution: 120dpi) {
    .fp-particle {
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .scan-wave {
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
    .gradient-orb {
        filter: blur(120px);
        opacity: 0.9;
    }
    
    .fp-particle {
        background: radial-gradient(circle, rgba(30, 144, 255, 1) 0%, rgba(30, 144, 255, 0.4) 40%, transparent 100%);
    }
}

/* 节能模式适配 */
@media (prefers-reduced-data) {
    .gradient-orb,
    .fingerprint-particles,
    .scan-bg,
    .fingerprint-bg-decoration {
        display: none;
    }
}

/* 指纹扫描环形背景 */
.fingerprint-rings {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.fp-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ringExpand 8s ease-in-out infinite;
}

.ring-1 { width: 100px; height: 100px; animation-delay: 0s; }
.ring-2 { width: 200px; height: 200px; animation-delay: 1.6s; }
.ring-3 { width: 300px; height: 300px; animation-delay: 3.2s; }
.ring-4 { width: 400px; height: 400px; animation-delay: 4.8s; }
.ring-5 { width: 500px; height: 500px; animation-delay: 6.4s; }

@keyframes ringExpand {
    0% { 
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
        border-color: rgba(0, 255, 255, 0);
    }
    20% {
        opacity: 0.8;
        border-color: rgba(0, 255, 255, 0.6);
    }
    80% {
        opacity: 0.4;
        border-color: rgba(0, 255, 255, 0.3);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
        border-color: rgba(0, 255, 255, 0);
    }
}

/* 生物识别数据流 */
.biometric-data {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.data-stream {
    position: absolute;
    width: 2px;
    height: 80px;
    background: linear-gradient(0deg, transparent, #0088ff, #00aaff, transparent);
    box-shadow: 0 0 10px #0088ff;
    animation: dataFlow 6s linear infinite;
}

.stream-1 { 
    top: 20%; 
    left: 15%; 
    animation-delay: 0s; 
    transform: rotate(45deg);
}
.stream-2 { 
    bottom: 25%; 
    right: 20%; 
    animation-delay: 1.5s; 
    transform: rotate(-30deg);
}
.stream-3 { 
    top: 60%; 
    left: 70%; 
    animation-delay: 3s; 
    transform: rotate(60deg);
}
.stream-4 { 
    top: 80%; 
    left: 35%; 
    animation-delay: 4.5s; 
    transform: rotate(-45deg);
}

@keyframes dataFlow {
    0%, 100% { opacity: 0; height: 0; }
    25% { opacity: 1; height: 80px; }
    75% { opacity: 0.8; height: 120px; }
}

/* 雷达扫描效果 */
.radar-scan {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.radar-sweep {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 200px;
    background: linear-gradient(0deg, transparent, #00ffff, transparent);
    transform-origin: bottom center;
    animation: radarSweep 4s linear infinite;
    box-shadow: 0 0 20px #00ffff;
}

.radar-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 50%;
    animation: radarPulse 4s ease-in-out infinite;
}

.radar-grid::before,
.radar-grid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.radar-grid::before {
    width: 66%;
    height: 66%;
}

.radar-grid::after {
    width: 33%;
    height: 33%;
}

@keyframes radarSweep {
    0% { transform: rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0; }
}

@keyframes radarPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

/* 霓虹指纹脊线装饰 */
.neon-ridges {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.neon-ridge {
    position: absolute;
    border: 2px solid transparent;
    border-radius: 50%;
    animation: neonGlow 5s ease-in-out infinite;
}

.ridge-a {
    width: 120px;
    height: 80px;
    top: 20%;
    left: 20%;
    border-color: rgba(0, 160, 255, 0.4);
    animation-delay: 0s;
}

.ridge-b {
    width: 90px;
    height: 60px;
    bottom: 30%;
    right: 25%;
    border-color: rgba(0, 200, 255, 0.4);
    animation-delay: 1.25s;
}

.ridge-c {
    width: 140px;
    height: 100px;
    top: 65%;
    left: 60%;
    border-color: rgba(0, 240, 255, 0.4);
    animation-delay: 2.5s;
}

.ridge-d {
    width: 110px;
    height: 70px;
    top: 75%;
    left: 15%;
    border-color: rgba(0, 180, 240, 0.4);
    animation-delay: 3.75s;
}

@keyframes neonGlow {
    0%, 100% {
        border-width: 1px;
        opacity: 0.3;
        filter: blur(0px);
        transform: scale(1);
    }
    50% {
        border-width: 3px;
        opacity: 1;
        filter: blur(1px);
        transform: scale(1.1);
        box-shadow: 0 0 30px currentColor;
    }
}

/* 数字雨效果（指纹主题） */
.fp-digital-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.digital-column {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, 
        transparent 0%, 
        rgba(96, 120, 160, 0.15) 20%, 
        rgba(128, 150, 180, 0.6) 40%, 
        rgba(160, 180, 210, 0.8) 50%, 
        rgba(128, 150, 180, 0.6) 60%, 
        rgba(96, 120, 160, 0.15) 80%, 
        transparent 100%
    );
    animation: digitalFall 22s linear infinite;
}

/* .digital-column::before {
    content: 'ABCDEF0123456789';
    position: absolute;
    top: 0;
    left: -5px;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #ff00ff;
    writing-mode: vertical-rl;
    opacity: 0.7;
    animation: digitalText 10s linear infinite;
    text-shadow: 0 0 5px #ff00ff;
} */

@keyframes digitalFall {
    0% { transform: translateY(-100%); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 0.6; }
    100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes digitalText {
    0% { transform: translateY(-20px); }
    100% { transform: translateY(100vh); }
}

/* 硬件加速优化 */
.fp-ring,
.data-stream,
.radar-sweep,
.radar-grid,
.neon-ridge,
.digital-column {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 深度性能优化 - 保留所有元素但优化性能 */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* CSS Containment 优化 - 限制布局重计算范围 */
.bg-layer,
.fingerprint-rings,
.biometric-data,
.radar-scan,
.neon-ridges,
.fp-digital-rain,
.gradient-bg,
.fingerprint-particles,
.scan-bg,
.fingerprint-bg-decoration {
    contain: layout style paint;
    isolation: isolate;
}

/* 合成层优化 - 智能GPU加速 */
.fingerprint-login-page {
    transform: translateZ(0);
    will-change: auto;
}

/* 动画性能优化 - 保持流畅但高效 */
.fp-ring {
    animation-timing-function: ease-out;
}

.neon-ridge {
    animation-timing-function: ease-in-out;
}

.radar-sweep {
    animation-timing-function: linear;
}

.digital-column {
    animation-timing-function: linear;
}

/* 动画性能优化 */
.gradient-orb {
    filter: blur(90px);
    animation-duration: 20s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.fp-ring {
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

.data-stream {
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.radar-sweep {
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.digital-column {
    animation-duration: 25s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

/* 分层优化 */
.bg-layer {
    animation-duration: 35s;
    animation-timing-function: ease-in-out;
}

/* 响应式性能优化 */
@media (max-width: 768px) {
    .gradient-orb {
        filter: blur(70px);
        animation-duration: 25s;
    }
    
    .digital-column {
        animation-duration: 18s;
    }
}

@media (max-width: 480px) {
    .bg-layer {
        animation-duration: 50s;
    }
    
    .gradient-orb {
        filter: blur(50px);
        animation-duration: 30s;
    }
}
</style>
