ms-vite-plugin 1.4.4 → 1.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,475 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>快点JS开发者登录</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
/* VSCode 主题色彩变量 */
|
|
10
|
+
--vscode-background: #1e1e1e;
|
|
11
|
+
--vscode-foreground: #cccccc;
|
|
12
|
+
--vscode-input-background: #3c3c3c;
|
|
13
|
+
--vscode-input-border: #3c3c3c;
|
|
14
|
+
--vscode-input-foreground: #cccccc;
|
|
15
|
+
--vscode-input-placeholder-foreground: #a6a6a6;
|
|
16
|
+
--vscode-button-background: #0e639c;
|
|
17
|
+
--vscode-button-foreground: #ffffff;
|
|
18
|
+
--vscode-button-hover-background: #1177bb;
|
|
19
|
+
--vscode-focus-border: #007fd4;
|
|
20
|
+
--vscode-error-foreground: #f48771;
|
|
21
|
+
--vscode-success-foreground: #89d185;
|
|
22
|
+
--vscode-border: #3c3c3c;
|
|
23
|
+
--vscode-widget-shadow: rgba(0, 0, 0, 0.36);
|
|
24
|
+
--vscode-panel-background: #252526;
|
|
25
|
+
--vscode-panel-border: #3c3c3c;
|
|
26
|
+
|
|
27
|
+
/* 组件样式变量 */
|
|
28
|
+
--border-radius: 2px;
|
|
29
|
+
--input-height: 36px;
|
|
30
|
+
--button-height: 36px;
|
|
31
|
+
--spacing-xs: 4px;
|
|
32
|
+
--spacing-sm: 8px;
|
|
33
|
+
--spacing-md: 12px;
|
|
34
|
+
--spacing-lg: 16px;
|
|
35
|
+
--spacing-xl: 20px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
body {
|
|
39
|
+
background-color: var(--vscode-background);
|
|
40
|
+
color: var(--vscode-foreground);
|
|
41
|
+
font-family:
|
|
42
|
+
-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu',
|
|
43
|
+
'Droid Sans', sans-serif;
|
|
44
|
+
font-size: 13px;
|
|
45
|
+
font-weight: 400;
|
|
46
|
+
margin: 0;
|
|
47
|
+
padding: var(--spacing-xl);
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
min-height: 100vh;
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
line-height: 1.4;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.container {
|
|
58
|
+
width: 100%;
|
|
59
|
+
max-width: 400px;
|
|
60
|
+
padding: var(--spacing-xl);
|
|
61
|
+
border-radius: var(--border-radius);
|
|
62
|
+
background-color: var(--vscode-panel-background);
|
|
63
|
+
border: 1px solid var(--vscode-panel-border);
|
|
64
|
+
box-shadow: 0 2px 8px var(--vscode-widget-shadow);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
h1 {
|
|
68
|
+
text-align: center;
|
|
69
|
+
margin: 0 0 var(--spacing-xl) 0;
|
|
70
|
+
color: var(--vscode-foreground);
|
|
71
|
+
font-size: 20px;
|
|
72
|
+
font-weight: 600;
|
|
73
|
+
letter-spacing: -0.25px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.form-group {
|
|
77
|
+
margin-bottom: var(--spacing-lg);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
label {
|
|
81
|
+
display: block;
|
|
82
|
+
margin-bottom: var(--spacing-xs);
|
|
83
|
+
color: var(--vscode-foreground);
|
|
84
|
+
font-weight: 400;
|
|
85
|
+
font-size: 13px;
|
|
86
|
+
line-height: 1.3;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
input[type='text'],
|
|
90
|
+
input[type='password'] {
|
|
91
|
+
width: 100%;
|
|
92
|
+
height: var(--input-height);
|
|
93
|
+
padding: var(--spacing-xs) var(--spacing-sm);
|
|
94
|
+
border: 1px solid var(--vscode-input-border);
|
|
95
|
+
border-radius: var(--border-radius);
|
|
96
|
+
background-color: var(--vscode-input-background);
|
|
97
|
+
color: var(--vscode-input-foreground);
|
|
98
|
+
box-sizing: border-box;
|
|
99
|
+
font-size: 13px;
|
|
100
|
+
font-family: inherit;
|
|
101
|
+
transition: border-color 0.15s ease-in-out;
|
|
102
|
+
outline: none;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
input[type='text']::placeholder,
|
|
106
|
+
input[type='password']::placeholder {
|
|
107
|
+
color: var(--vscode-input-placeholder-foreground);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
input:focus {
|
|
111
|
+
border-color: var(--vscode-focus-border);
|
|
112
|
+
outline: 1px solid var(--vscode-focus-border);
|
|
113
|
+
outline-offset: -1px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
input:hover:not(:focus) {
|
|
117
|
+
border-color: var(--vscode-focus-border);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.captcha-container {
|
|
121
|
+
display: flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
gap: var(--spacing-sm);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.captcha-input {
|
|
127
|
+
flex: 1;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.captcha-image {
|
|
131
|
+
width: 120px;
|
|
132
|
+
height: var(--input-height);
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
border: 1px solid var(--vscode-input-border);
|
|
135
|
+
border-radius: var(--border-radius);
|
|
136
|
+
background-color: var(--vscode-input-background);
|
|
137
|
+
transition: border-color 0.15s ease-in-out;
|
|
138
|
+
object-fit: cover;
|
|
139
|
+
box-sizing: border-box;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.captcha-image:hover {
|
|
143
|
+
border-color: var(--vscode-focus-border);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.agreement-container {
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: flex-start;
|
|
149
|
+
gap: var(--spacing-sm);
|
|
150
|
+
margin-bottom: var(--spacing-lg);
|
|
151
|
+
font-size: 13px;
|
|
152
|
+
line-height: 1.4;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.agreement-checkbox {
|
|
156
|
+
margin-top: 2px;
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
accent-color: var(--vscode-button-background);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.agreement-text {
|
|
162
|
+
color: var(--vscode-foreground);
|
|
163
|
+
flex: 1;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.agreement-link {
|
|
167
|
+
color: var(--vscode-focus-border);
|
|
168
|
+
text-decoration: none;
|
|
169
|
+
transition: opacity 0.15s ease-in-out;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.agreement-link:hover {
|
|
173
|
+
opacity: 0.8;
|
|
174
|
+
text-decoration: underline;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.register-container {
|
|
178
|
+
text-align: center;
|
|
179
|
+
margin-top: var(--spacing-md);
|
|
180
|
+
font-size: 13px;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
button {
|
|
184
|
+
width: 100%;
|
|
185
|
+
height: var(--button-height);
|
|
186
|
+
padding: 0 var(--spacing-md);
|
|
187
|
+
background-color: var(--vscode-button-background);
|
|
188
|
+
color: var(--vscode-button-foreground);
|
|
189
|
+
border: none;
|
|
190
|
+
border-radius: var(--border-radius);
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
font-size: 13px;
|
|
193
|
+
font-weight: 400;
|
|
194
|
+
font-family: inherit;
|
|
195
|
+
transition: background-color 0.15s ease-in-out;
|
|
196
|
+
margin-top: var(--spacing-md);
|
|
197
|
+
display: flex;
|
|
198
|
+
align-items: center;
|
|
199
|
+
justify-content: center;
|
|
200
|
+
outline: none;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
button:hover:not(:disabled) {
|
|
204
|
+
background-color: var(--vscode-button-hover-background);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
button:focus {
|
|
208
|
+
outline: 1px solid var(--vscode-focus-border);
|
|
209
|
+
outline-offset: 2px;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
button:active:not(:disabled) {
|
|
213
|
+
transform: translateY(1px);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
button:disabled {
|
|
217
|
+
background-color: var(--vscode-input-border);
|
|
218
|
+
color: var(--vscode-input-placeholder-foreground);
|
|
219
|
+
cursor: not-allowed;
|
|
220
|
+
transform: none;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.message {
|
|
224
|
+
margin-top: var(--spacing-md);
|
|
225
|
+
text-align: center;
|
|
226
|
+
min-height: 20px;
|
|
227
|
+
padding: var(--spacing-sm);
|
|
228
|
+
border-radius: var(--border-radius);
|
|
229
|
+
font-size: 13px;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.error-message {
|
|
233
|
+
color: var(--vscode-error-foreground);
|
|
234
|
+
background-color: rgba(244, 135, 113, 0.1);
|
|
235
|
+
border: 1px solid rgba(244, 135, 113, 0.3);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.success-message {
|
|
239
|
+
color: var(--vscode-success-foreground);
|
|
240
|
+
background-color: rgba(137, 209, 133, 0.1);
|
|
241
|
+
border: 1px solid rgba(137, 209, 133, 0.3);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.loading {
|
|
245
|
+
display: inline-block;
|
|
246
|
+
width: 14px;
|
|
247
|
+
height: 14px;
|
|
248
|
+
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
249
|
+
border-radius: 50%;
|
|
250
|
+
border-top-color: var(--vscode-button-foreground);
|
|
251
|
+
animation: spin 1s linear infinite;
|
|
252
|
+
margin-right: var(--spacing-sm);
|
|
253
|
+
vertical-align: middle;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
@keyframes spin {
|
|
257
|
+
to {
|
|
258
|
+
transform: rotate(360deg);
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* 响应式设计 */
|
|
263
|
+
@media (max-width: 480px) {
|
|
264
|
+
body {
|
|
265
|
+
padding: var(--spacing-md);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.container {
|
|
269
|
+
padding: var(--spacing-md);
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
h1 {
|
|
273
|
+
font-size: 18px;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
</style>
|
|
277
|
+
</head>
|
|
278
|
+
|
|
279
|
+
<body>
|
|
280
|
+
<div class="container">
|
|
281
|
+
<h1>快点JS开发者登录</h1>
|
|
282
|
+
<form id="loginForm">
|
|
283
|
+
<div class="form-group">
|
|
284
|
+
<label for="username">用户名</label>
|
|
285
|
+
<input
|
|
286
|
+
type="text"
|
|
287
|
+
id="username"
|
|
288
|
+
name="username"
|
|
289
|
+
required
|
|
290
|
+
placeholder="请输入用户名或手机号(注意此账号和APP账号不一样)"
|
|
291
|
+
/>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="form-group">
|
|
294
|
+
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
295
|
+
<label for="password" style="margin-bottom: 0;">密码</label>
|
|
296
|
+
<a
|
|
297
|
+
href="https://uc.kuai.js.cn/#/forgot-password"
|
|
298
|
+
target="_blank"
|
|
299
|
+
rel="noopener noreferrer"
|
|
300
|
+
class="agreement-link"
|
|
301
|
+
style="font-size: 12px;"
|
|
302
|
+
>忘记密码？</a
|
|
303
|
+
>
|
|
304
|
+
</div>
|
|
305
|
+
<input type="password" id="password" name="password" required placeholder="请输入密码" style="margin-top: 4px;" />
|
|
306
|
+
</div>
|
|
307
|
+
<div class="form-group">
|
|
308
|
+
<label for="verifyCode">验证码</label>
|
|
309
|
+
<div class="captcha-container">
|
|
310
|
+
<input
|
|
311
|
+
type="text"
|
|
312
|
+
id="verifyCode"
|
|
313
|
+
name="verifyCode"
|
|
314
|
+
class="captcha-input"
|
|
315
|
+
required
|
|
316
|
+
placeholder="请输入验证码"
|
|
317
|
+
/>
|
|
318
|
+
<img
|
|
319
|
+
id="captchaImage"
|
|
320
|
+
class="captcha-image"
|
|
321
|
+
src=""
|
|
322
|
+
alt="验证码"
|
|
323
|
+
title="点击刷新验证码"
|
|
324
|
+
/>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
<div class="agreement-container">
|
|
328
|
+
<input type="checkbox" id="agreementCheckbox" class="agreement-checkbox" required />
|
|
329
|
+
<label for="agreementCheckbox" class="agreement-text">
|
|
330
|
+
我已阅读并同意
|
|
331
|
+
<a href="https://kuai.js.cn/about/agreement.html" target="_blank" class="agreement-link"
|
|
332
|
+
>《用户协议和免责声明》</a
|
|
333
|
+
>
|
|
334
|
+
</label>
|
|
335
|
+
</div>
|
|
336
|
+
<button type="submit" id="loginButton">
|
|
337
|
+
<span class="button-text">登录</span>
|
|
338
|
+
</button>
|
|
339
|
+
<div class="register-container">
|
|
340
|
+
还没有账号？
|
|
341
|
+
<a
|
|
342
|
+
href="https://uc.kuai.js.cn/#/register"
|
|
343
|
+
target="_blank"
|
|
344
|
+
rel="noopener noreferrer"
|
|
345
|
+
class="agreement-link"
|
|
346
|
+
>去注册</a
|
|
347
|
+
>
|
|
348
|
+
</div>
|
|
349
|
+
</form>
|
|
350
|
+
<div id="message"></div>
|
|
351
|
+
</div>
|
|
352
|
+
|
|
353
|
+
<script>
|
|
354
|
+
const vscode = acquireVsCodeApi();
|
|
355
|
+
|
|
356
|
+
// 保存验证码ID
|
|
357
|
+
let captchaId = null;
|
|
358
|
+
|
|
359
|
+
// 页面加载完成后获取验证码
|
|
360
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
361
|
+
refreshCaptcha();
|
|
362
|
+
});
|
|
363
|
+
|
|
364
|
+
// 刷新验证码
|
|
365
|
+
function refreshCaptcha() {
|
|
366
|
+
// 显示验证码加载状态
|
|
367
|
+
const captchaImage = document.getElementById('captchaImage');
|
|
368
|
+
captchaImage.style.opacity = '0.5';
|
|
369
|
+
captchaImage.style.filter = 'blur(2px)';
|
|
370
|
+
|
|
371
|
+
// 向扩展发送获取验证码的请求，包含宽高参数
|
|
372
|
+
vscode.postMessage({
|
|
373
|
+
command: 'getCaptcha',
|
|
374
|
+
width: 120,
|
|
375
|
+
height: 36
|
|
376
|
+
});
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
// 处理来自扩展的消息
|
|
380
|
+
window.addEventListener('message', (event) => {
|
|
381
|
+
const message = event.data;
|
|
382
|
+
switch (message.command) {
|
|
383
|
+
case 'loginSuccess':
|
|
384
|
+
document.getElementById('message').innerHTML =
|
|
385
|
+
'<div class="message success-message">登录成功！</div>';
|
|
386
|
+
const successLoginButton = document.getElementById('loginButton');
|
|
387
|
+
successLoginButton.disabled = false;
|
|
388
|
+
successLoginButton.querySelector('.button-text').innerHTML = '登录';
|
|
389
|
+
// 可以选择关闭窗口或执行其他操作
|
|
390
|
+
// vscode.postMessage({ command: 'close' });
|
|
391
|
+
break;
|
|
392
|
+
case 'loginError':
|
|
393
|
+
document.getElementById('message').innerHTML =
|
|
394
|
+
'<div class="message error-message">' + message.message + '</div>';
|
|
395
|
+
const loginButton = document.getElementById('loginButton');
|
|
396
|
+
loginButton.disabled = false;
|
|
397
|
+
loginButton.querySelector('.button-text').innerHTML = '登录';
|
|
398
|
+
refreshCaptcha();
|
|
399
|
+
break;
|
|
400
|
+
case 'captchaData':
|
|
401
|
+
// 更新验证码ID
|
|
402
|
+
captchaId = message.captchaId;
|
|
403
|
+
// 更新验证码图片
|
|
404
|
+
const captchaImage = document.getElementById('captchaImage');
|
|
405
|
+
captchaImage.src = message.imageData;
|
|
406
|
+
// 恢复验证码图片状态
|
|
407
|
+
captchaImage.style.opacity = '1';
|
|
408
|
+
captchaImage.style.filter = 'none';
|
|
409
|
+
break;
|
|
410
|
+
case 'captchaError':
|
|
411
|
+
document.getElementById('message').innerHTML =
|
|
412
|
+
'<div class="message error-message">' + message.message + '</div>';
|
|
413
|
+
// 恢复验证码图片状态
|
|
414
|
+
const captchaImg = document.getElementById('captchaImage');
|
|
415
|
+
captchaImg.style.opacity = '1';
|
|
416
|
+
captchaImg.style.filter = 'none';
|
|
417
|
+
break;
|
|
418
|
+
}
|
|
419
|
+
});
|
|
420
|
+
|
|
421
|
+
// 表单提交处理
|
|
422
|
+
document.getElementById('loginForm').addEventListener('submit', function (e) {
|
|
423
|
+
e.preventDefault();
|
|
424
|
+
|
|
425
|
+
// 获取表单数据
|
|
426
|
+
const username = document.getElementById('username').value;
|
|
427
|
+
const password = document.getElementById('password').value;
|
|
428
|
+
const verifyCode = document.getElementById('verifyCode').value;
|
|
429
|
+
const agreementChecked = document.getElementById('agreementCheckbox').checked;
|
|
430
|
+
|
|
431
|
+
// 简单验证
|
|
432
|
+
if (!username || !password || !verifyCode) {
|
|
433
|
+
document.getElementById('message').innerHTML =
|
|
434
|
+
'<div class="message error-message">请填写所有字段</div>';
|
|
435
|
+
return;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
// 检查是否同意用户协议
|
|
439
|
+
if (!agreementChecked) {
|
|
440
|
+
document.getElementById('message').innerHTML =
|
|
441
|
+
'<div class="message error-message">请先阅读并同意用户协议和免责声明</div>';
|
|
442
|
+
return;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
// 检查验证码ID是否存在
|
|
446
|
+
if (!captchaId) {
|
|
447
|
+
document.getElementById('message').innerHTML =
|
|
448
|
+
'<div class="message error-message">请先获取验证码</div>';
|
|
449
|
+
return;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
// 禁用登录按钮，防止重复提交
|
|
453
|
+
const loginButton = document.getElementById('loginButton');
|
|
454
|
+
loginButton.disabled = true;
|
|
455
|
+
loginButton.querySelector('.button-text').innerHTML =
|
|
456
|
+
'<span class="loading"></span>登录中...';
|
|
457
|
+
document.getElementById('message').innerHTML = '';
|
|
458
|
+
|
|
459
|
+
// 发送登录请求到扩展
|
|
460
|
+
vscode.postMessage({
|
|
461
|
+
command: 'login',
|
|
462
|
+
username: username,
|
|
463
|
+
password: password,
|
|
464
|
+
captchaId: captchaId, // 使用保存的验证码ID
|
|
465
|
+
verifyCode: verifyCode // 使用用户输入的验证码
|
|
466
|
+
});
|
|
467
|
+
});
|
|
468
|
+
|
|
469
|
+
// 点击验证码图片刷新验证码
|
|
470
|
+
document.getElementById('captchaImage').addEventListener('click', function () {
|
|
471
|
+
refreshCaptcha();
|
|
472
|
+
});
|
|
473
|
+
</script>
|
|
474
|
+
</body>
|
|
475
|
+
</html>
|