丰富功能和优化

app.py

@@ -37,6 +37,8 @@ def generate():
     if file.filename == '':
         return jsonify({'error': 'No selected file'}), 400
     bg_color_hex = request.form.get('bgColor', '')
+    site_name = request.form.get('siteName', 'My Website') or 'My Website'
+    short_name = request.form.get('shortName', 'Website') or 'Website'
     fill_color = (255, 255, 255, 0)
     theme_color = "#ffffff"
     if bg_color_hex and bg_color_hex != 'transparent':
@@ -71,14 +73,24 @@ def generate():
             img_192.save(android192_io, format='PNG')
             android192_io.seek(0)
             zf.writestr('android-chrome-192x192.png', android192_io.read())
+            favicon32_io = io.BytesIO()
+            img_32 = img_square.resize((32, 32), Image.Resampling.LANCZOS)
+            img_32.save(favicon32_io, format='PNG')
+            favicon32_io.seek(0)
+            zf.writestr('favicon-32x32.png', favicon32_io.read())
+            favicon16_io = io.BytesIO()
+            img_16 = img_square.resize((16, 16), Image.Resampling.LANCZOS)
+            img_16.save(favicon16_io, format='PNG')
+            favicon16_io.seek(0)
+            zf.writestr('favicon-16x16.png', favicon16_io.read())
             android512_io = io.BytesIO()
             img_512 = img_square.resize(ANDROID_512_SIZE, Image.Resampling.LANCZOS)
             img_512.save(android512_io, format='PNG')
             android512_io.seek(0)
             zf.writestr('android-chrome-512x512.png', android512_io.read())
             manifest = {
-                "name": "My Website",
-                "short_name": "Website",
+                "name": site_name,
+                "short_name": short_name,
                 "icons": [
                     {
                         "src": "/android-chrome-192x192.png",

templates/index.html

@@ -137,6 +137,26 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 mb-1">站点名称 (name)</label>
+                                <input
+                                    v-model="siteName"
+                                    type="text"
+                                    class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                                    placeholder="My Website"
+                                >
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 mb-1">PWA 短名称 (short_name)</label>
+                                <input
+                                    v-model="shortName"
+                                    type="text"
+                                    class="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                                    placeholder="Website"
+                                >
+                            </div>
+                        </div>
                     </div>
 
                     <!-- Generate Button -->
@@ -234,11 +254,7 @@
                             </button>
                         </div>
                         <div class="p-4 overflow-x-auto relative group">
-                            <pre class="text-xs md:text-sm font-mono text-indigo-100 leading-relaxed whitespace-pre-wrap break-all"><code>&lt;link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"&gt;
-&lt;link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"&gt;
-&lt;link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"&gt;
-&lt;link rel="manifest" href="/site.webmanifest"&gt;<span v-if="bgColor !== 'transparent'" class="text-green-300">
-&lt;meta name="theme-color" content="{{ bgColor }}"&gt;</span></code></pre>
+                            <pre class="text-xs md:text-sm font-mono text-indigo-100 leading-relaxed whitespace-pre-wrap break-all"><code>{{ htmlSnippet }}</code></pre>
                         </div>
                     </div>
                 </div>
@@ -292,6 +308,8 @@
                 const errorMsg = ref('');
                 const copyText = ref('复制');
                 const bgColor = ref('transparent');
+                const siteName = ref('My Website');
+                const shortName = ref('Website');
                 const activeTab = ref('browser');
 
                 const presetColors = ['#ffffff', '#000000', '#f8fafc', '#1e293b', '#4f46e5', '#ef4444', '#10b981'];
@@ -300,6 +318,17 @@
                     return bgColor.value === 'transparent' ? 'transparent' : bgColor.value;
                 });
 
+                const htmlSnippet = computed(() => {
+                    let code = `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/site.webmanifest">`;
+                    if (bgColor.value !== 'transparent') {
+                        code += `\n<meta name="theme-color" content="${bgColor.value}">`;
+                    }
+                    return code;
+                });
+
                 const handleFileSelect = (event) => {
                     const selectedFile = event.target.files[0];
                     processFile(selectedFile);
@@ -339,7 +368,6 @@
                     previewUrl.value = '';
                     errorMsg.value = '';
                     bgColor.value = 'transparent';
-                    // Reset input
                     const input = document.querySelector('input[type="file"]');
                     if (input) input.value = '';
                 };
@@ -353,6 +381,8 @@
                     const formData = new FormData();
                     formData.append('file', file.value);
                     formData.append('bgColor', bgColor.value);
+                    formData.append('siteName', siteName.value || 'My Website');
+                    formData.append('shortName', shortName.value || 'Website');
 
                     try {
                         const response = await fetch('/api/generate', {
@@ -384,16 +414,7 @@
                 };
 
                 const copyCode = () => {
-                    let code = `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">`;
-                    
-                    if (bgColor.value !== 'transparent') {
-                        code += `\n<meta name="theme-color" content="${bgColor.value}">`;
-                    }
-                    
-                    navigator.clipboard.writeText(code).then(() => {
+                    navigator.clipboard.writeText(htmlSnippet.value).then(() => {
                         copyText.value = '已复制!';
                         setTimeout(() => copyText.value = '复制', 2000);
                     });
@@ -411,6 +432,9 @@
                     bgColor,
                     presetColors,
                     finalBgColor,
+                    siteName,
+                    shortName,
+                    htmlSnippet,
                     activeTab,
                     handleFileSelect,
                     handleDrop,