开发者工具提示信息功能添加教程

1
---
2
import { siteConfig } from "@/config";
3

4
const devtoolsWarning = siteConfig.devtoolsWarning || false;
5
---
6

7
<script is:inline define:vars={{ devtoolsWarning }}>
8
  (function () {
9
    const style = document.createElement("style");
10
    style.textContent = `
11
    #devtools-warning {
12
      position: fixed;
13
      top: 20px;
14
      left: 50%;
15
      transform: translateX(-50%) translateY(-150px);
16
      background: var(--card-bg, #fff);
17
      color: var(--text-primary, #1f2937);
18
      padding: 0;
19
      border-radius: 12px;
20
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
21
      transition: transform 0.3s ease, opacity 0.3s ease;
22
      z-index: 999999;
23
      font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
24
      min-width: 320px;
25
      max-width: 400px;
26
      overflow: hidden;
27
      opacity: 0;
28
      pointer-events: none;
29
      border: 1px solid var(--line-divider, rgba(0,0,0,0.05));
30
    }
31

32
    :root.dark #devtools-warning {
33
      background: var(--card-bg, #1f2937);
34
      color: var(--text-primary, #f9fafb);
35
      border-color: var(--line-divider, rgba(255,255,255,0.1));
36
    }
37

38
    #devtools-warning.show {
39
      transform: translateX(-50%) translateY(0);
40
      opacity: 1;
41
    }
42

43
    #devtools-warning.hide {
44
      transform: translateX(-50%) translateY(-150px);
45
      opacity: 0;
46
    }
47

48
    #devtools-warning-content {
49
      padding: 16px 20px;
50
      display: flex;
51
      align-items: center;
52
      gap: 12px;
53
    }
54

55
    #devtools-warning-icon {
56
      width: 28px;
57
      height: 28px;
58
      flex-shrink: 0;
59
      background: #fbbf24;
60
      border-radius: 50%;
61
      display: flex;
62
      align-items: center;
63
      justify-content: center;
64
      color: #fff;
65
      font-size: 16px;
66
      font-weight: bold;
67
      line-height: 1;
68
    }
69

70
    #devtools-warning-text {
71
      flex: 1;
72
      font-size: 14px;
73
      font-weight: 500;
74
      line-height: 1.4;
75
      color: var(--text-primary, #1f2937);
76
    }
77

78
    :root.dark #devtools-warning-text {
79
      color: var(--text-primary, #f9fafb);
80
    }
81

82
    #devtools-warning-progress {
83
      height: 3px;
84
      background: var(--line-divider, rgba(0,0,0,0.05));
85
      width: 100%;
86
      position: relative;
87
      overflow: hidden;
88
    }
89

90
    :root.dark #devtools-warning-progress {
91
      background: var(--line-divider, rgba(255,255,255,0.1));
92
    }
93

94
    #devtools-warning-progress-bar {
95
      position: absolute;
96
      top: 0;
97
      left: 0;
98
      height: 100%;
99
      width: 100%;
100
      background: var(--primary, #6366f1);
101
      transform-origin: left;
102
      transform: scaleX(1);
103
    }
104

105
    #devtools-warning-progress-bar.animate {
106
      animation: shrink ${devtoolsWarning.time}s linear forwards;
107
    }
108

109
    @keyframes shrink {
110
      from { transform: scaleX(1); }
111
      to { transform: scaleX(0); }
112
    }
113
  `;
114
    document.head.appendChild(style);
115

116
    const warning = document.createElement("div");
117
    warning.id = "devtools-warning";
118
    warning.innerHTML = `
119
    <div id="devtools-warning-content">
120
      <div id="devtools-warning-icon">!</div>
121
      <div id="devtools-warning-text">${devtoolsWarning.message || "检测到开发者工具已打开"}</div>
122
    </div>
123
    <div id="devtools-warning-progress">
124
      <div id="devtools-warning-progress-bar"></div>
125
    </div>
126
  `;
127
    document.body.appendChild(warning);
128

129
    let hasShown = false;
130

131
    function showWarning() {
132
      if (hasShown) return;
133
      hasShown = true;
134
      const progressBar = warning.querySelector("#devtools-warning-progress-bar");
135
      warning.classList.add("show");
136
      progressBar.classList.add("animate");
137

138
      const onProgressComplete = () => {
139
        warning.classList.remove("show");
140
        warning.classList.add("hide");
141
        setTimeout(() => warning.remove(), 300);
142
      };
143
      progressBar.addEventListener("animationend", onProgressComplete, { once: true });
144
    }
145

146
    document.addEventListener("keydown", (e) => {
147
      if (hasShown) return;
148
      if (e.key === "F12") {
149
        showWarning();
150
        return;
151
      }
152
      if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "I") {
153
        showWarning();
154
        return;
155
      }
156
      if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "J") {
157
        showWarning();
158
        return;
159
      }
160
      if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "C") {
161
        showWarning();
162
        return;
163
      }
164
      if (e.metaKey && e.altKey && e.key.toUpperCase() === "I") {
165
        showWarning();
166
        return;
167
      }
168
      if (e.metaKey && e.altKey && e.key.toUpperCase() === "J") {
169
        showWarning();
170
        return;
171
      }
172
      if (e.metaKey && e.altKey && e.key.toUpperCase() === "C") {
173
        showWarning();
174
        return;
175
      }
176
    });
177
  })();
178
</script>

1
#devtools-warning {
2
  /* 提示框容器样式 */
3
}
4

5
#devtools-warning-icon {
6
  /* 图标样式 */
7
}
8

9
#devtools-warning-text {
10
  /* 文本样式 */
11
}
12

13
#devtools-warning-progress-bar {
14
  /* 进度条样式 */
15
}