Skip to content

Commit 317d422

Browse files
author
Taois
committed
add: 优化下载功能
1 parent 33d5bf6 commit 317d422

File tree

1 file changed

+176
-16
lines changed

1 file changed

+176
-16
lines changed

‎public/download.html‎

Lines changed: 176 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -258,25 +258,107 @@
258258

259259
.toast {
260260
position: fixed;
261-
top: 30px;
262-
left: 50%;
263-
transform: translateX(-50%) translateY(-20px);
261+
top: 20px;
262+
right: 20px;
263+
padding: 12px 24px;
264264
background: linear-gradient(135deg, var(--success), #059669);
265265
color: white;
266-
padding: 14px 28px;
267-
border-radius: 12px;
268-
display: none;
266+
border-radius: 8px;
267+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
268+
transform: translateX(120%);
269+
transition: transform 0.3s ease;
269270
z-index: 1000;
270271
font-weight: 600;
271-
box-shadow: 0 8px 32px rgba(16, 185, 129, 0.4);
272-
opacity: 0;
273-
transition: all 0.3s ease;
272+
backdrop-filter: blur(10px);
274273
}
275274

276275
.toast.show {
277-
display: block;
278-
opacity: 1;
279-
transform: translateX(-50%) translateY(0);
276+
transform: translateX(0);
277+
}
278+
279+
.copy-modal {
280+
position: fixed;
281+
top: 0;
282+
left: 0;
283+
right: 0;
284+
bottom: 0;
285+
background: rgba(0, 0, 0, 0.7);
286+
display: flex;
287+
align-items: center;
288+
justify-content: center;
289+
z-index: 1001;
290+
animation: fadeIn 0.2s ease;
291+
}
292+
293+
.copy-modal-content {
294+
background: var(--bg-secondary);
295+
border: 1px solid var(--border-color);
296+
border-radius: 12px;
297+
padding: 20px;
298+
max-width: 90%;
299+
width: 400px;
300+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
301+
backdrop-filter: blur(20px);
302+
}
303+
304+
.copy-modal-content h3 {
305+
margin-bottom: 12px;
306+
color: var(--text-primary);
307+
font-size: 1.1rem;
308+
}
309+
310+
.copy-modal-content p {
311+
margin-bottom: 16px;
312+
color: var(--text-secondary);
313+
font-size: 0.9rem;
314+
line-height: 1.5;
315+
}
316+
317+
.copy-modal-content input {
318+
width: 100%;
319+
padding: 10px 12px;
320+
background: var(--bg-primary);
321+
border: 1px solid var(--border-color);
322+
border-radius: 6px;
323+
color: var(--text-primary);
324+
font-size: 0.85rem;
325+
margin-bottom: 16px;
326+
box-sizing: border-box;
327+
}
328+
329+
.copy-modal-actions {
330+
display: flex;
331+
gap: 10px;
332+
justify-content: flex-end;
333+
}
334+
335+
.copy-modal-actions button {
336+
padding: 8px 16px;
337+
border: none;
338+
border-radius: 6px;
339+
font-weight: 600;
340+
font-size: 0.9rem;
341+
cursor: pointer;
342+
transition: all 0.3s ease;
343+
}
344+
345+
.copy-modal-actions button:first-child {
346+
background: var(--border-color);
347+
color: var(--text-primary);
348+
}
349+
350+
.copy-modal-actions button:first-child:hover {
351+
background: rgba(148, 163, 184, 0.3);
352+
}
353+
354+
.copy-modal-actions button:last-child {
355+
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
356+
color: white;
357+
}
358+
359+
.copy-modal-actions button:last-child:hover {
360+
transform: translateY(-2px);
361+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
280362
}
281363

282364
@media (max-width: 768px) {
@@ -315,9 +397,25 @@
315397
.toast {
316398
left: 10px;
317399
right: 10px;
400+
top: 10px;
318401
padding: 10px 14px;
319402
font-size: 0.85rem;
320403
}
404+
405+
.copy-modal-content {
406+
width: 90%;
407+
max-width: 90%;
408+
padding: 16px;
409+
}
410+
411+
.copy-modal-content h3 {
412+
font-size: 1rem;
413+
}
414+
415+
.copy-modal-content input {
416+
font-size: 0.8rem;
417+
padding: 8px 10px;
418+
}
321419
}
322420

323421
@keyframes fadeIn {
@@ -382,11 +480,73 @@ <h1>{{projectName}} 下载中心</h1>
382480
<script>
383481
function copyLink(url) {
384482
const fullUrl = window.location.origin + url;
385-
navigator.clipboard.writeText(fullUrl).then(() => {
386-
showToast('链接已复制到剪贴板');
387-
}).catch(err => {
483+
484+
if (navigator.clipboard && navigator.clipboard.writeText) {
485+
navigator.clipboard.writeText(fullUrl).then(() => {
486+
showToast('链接已复制到剪贴板');
487+
}).catch(err => {
488+
fallbackCopy(fullUrl);
489+
});
490+
} else {
491+
fallbackCopy(fullUrl);
492+
}
493+
}
494+
495+
function fallbackCopy(text) {
496+
const textarea = document.createElement('textarea');
497+
textarea.value = text;
498+
textarea.style.position = 'fixed';
499+
textarea.style.opacity = '0';
500+
textarea.style.left = '-9999px';
501+
document.body.appendChild(textarea);
502+
textarea.select();
503+
textarea.setSelectionRange(0, 99999);
504+
505+
try {
506+
const successful = document.execCommand('copy');
507+
if (successful) {
508+
showToast('链接已复制到剪贴板');
509+
} else {
510+
showManualCopy(text);
511+
}
512+
} catch (err) {
513+
showManualCopy(text);
514+
}
515+
516+
document.body.removeChild(textarea);
517+
}
518+
519+
function showManualCopy(url) {
520+
const modal = document.createElement('div');
521+
modal.className = 'copy-modal';
522+
modal.innerHTML = `
523+
<div class="copy-modal-content">
524+
<h3>手动复制链接</h3>
525+
<p>您的浏览器不支持自动复制，请手动复制以下链接：</p>
526+
<input type="text" value="${url}" readonly>
527+
<div class="copy-modal-actions">
528+
<button onclick="this.closest('.copy-modal').remove()">关闭</button>
529+
<button onclick="selectAndCopy(this)">复制</button>
530+
</div>
531+
</div>
532+
`;
533+
document.body.appendChild(modal);
534+
}
535+
536+
function selectAndCopy(btn) {
537+
const input = btn.closest('.copy-modal-content').querySelector('input');
538+
input.select();
539+
input.setSelectionRange(0, 99999);
540+
541+
try {
542+
const successful = document.execCommand('copy');
543+
if (successful) {
544+
showToast('链接已复制到剪贴板');
545+
btn.closest('.copy-modal').remove();
546+
}
547+
} catch (err) {
388548
showToast('复制失败，请手动复制');
389-
});
549+
}
390550
}
391551

392552
function showToast(message) {

0 commit comments

Comments
 (0)