DFAN-Admin/loading.html at main · DFANNN/DFAN-Admin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<div id="__app-loading__" class="app-loading">
  <div class="app-loading-content">
    <img src="/logo.svg" alt="logo" class="loading-logo" />
    <div class="loading-text">DFAN Admin</div>
  </div>
</div>

<script>
  // 检测 dark 模式并应用到 loading
  ;(function () {
    // 从 localStorage 读取主题模式
    const themeConfig = JSON.parse(localStorage.getItem('themeConfig') || '{}')
    const isDark = themeConfig.themeMode === 'dark'

    // 如果 html 标签已经有 dark 类，也认为是 dark 模式
    const htmlHasDark = document.documentElement.classList.contains('dark')

    if (isDark || htmlHasDark) {
      document.documentElement.classList.add('dark')
      const loadingEl = document.getElementById('__app-loading__')
      if (loadingEl) {
        loadingEl.classList.add('dark-mode')
      }
    }
  })()
</script>

<style>
  .app-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 99999;
    transition: background-color 0.3s ease;
  }

  .app-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .loading-logo {
    width: 120px;
    height: 120px;
    animation: logoSpin 2s ease-in-out infinite;
  }

  @media (max-width: 992px) {
    .loading-logo {
      width: 80px;
      height: 80px;
    }
  }

  @keyframes logoSpin {
    0% {
      transform: rotate(0deg) scale(1);
    }
    25% {
      transform: rotate(90deg) scale(1.1);
    }
    50% {
      transform: rotate(180deg) scale(1);
    }
    75% {
      transform: rotate(270deg) scale(1.1);
    }
    100% {
      transform: rotate(360deg) scale(1);
    }
  }

  .loading-text {
    color: #666;
    font-size: 32px;
    font-weight: 600;
    transition: color 0.3s ease;
    letter-spacing: 1px;
  }

  @media (max-width: 992px) {
    .loading-text {
      font-size: 24px;
    }
  }

  /* Dark 模式样式 */
  .app-loading.dark-mode {
    background: #1d1e1f;
  }

  .app-loading.dark-mode .loading-text {
    color: #a8abb2;
  }

  /* 或者使用 html.dark 选择器（如果 useDark 已经添加了 dark 类） */
  html.dark .app-loading {
    background: #1d1e1f;
  }

  html.dark .app-loading .loading-text {
    color: #a8abb2;
  }

  /* 应用加载完成后隐藏 */
  .app-loading.hidden {
    display: none;
  }
</style>