feat: 添加PWA支持，支持离线访问和添加到主屏幕

2026-03-28 00:47:13 +07:00
parent d437580500
commit 8ffadc8604
5 changed files with 172 additions and 2 deletions
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Generate PWA Icons</title>
+</head>
+<body>
+    <h2>PWA图标生成器</h2>
+    <p>请使用浏览器打开此文件，然后右键保存生成的图标</p>
+    <div id="icons"></div>
+    
+    <script>
+        const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
+        const container = document.getElementById('icons');
+        
+        sizes.forEach(size => {
+            const canvas = document.createElement('canvas');
+            canvas.width = size;
+            canvas.height = size;
+            const ctx = canvas.getContext('2d');
+            
+            // 背景
+            ctx.fillStyle = '#1890ff';
+            ctx.fillRect(0, 0, size, size);
+            
+            // 文字
+            ctx.fillStyle = 'white';
+            ctx.font = `bold ${size * 0.5}px Arial, sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText('轻', size / 2, size / 2 + size * 0.05);
+            
+            // 显示
+            const div = document.createElement('div');
+            div.style.margin = '10px';
+            div.innerHTML = `<p>${size}x${size}</p>`;
+            const img = document.createElement('img');
+            img.src = canvas.toDataURL('image/png');
+            img.style.width = '64px';
+            img.style.height = '64px';
+            img.style.border = '1px solid #ccc';
+            div.appendChild(img);
+            
+            // 下载链接
+            const link = document.createElement('a');
+            link.href = canvas.toDataURL('image/png');
+            link.download = `icon-${size}x${size}.png`;
+            link.textContent = '下载';
+            link.style.marginLeft = '10px';
+            div.appendChild(link);
+            
+            container.appendChild(div);
+        });
+    </script>
+</body>
+</html>