Spaces:

duqing026
/

interactive-checklist-pro

Sleeping

App Files Files Community

duqing2026 commited on Jan 30

Commit

a30d178

1 Parent(s): f6413ef

Fix Jinja2 error, add auto-save & JSON export, optimize Dockerfile

Browse files

Files changed (2) hide show

Dockerfile +4 -11
templates/builder.html +71 -3

Dockerfile CHANGED Viewed

@@ -11,20 +11,13 @@ COPY . /app
 # Create a non-root user and switch to it
 RUN useradd -m -u 1000 user
-USER user
-ENV PATH="/home/user/.local/bin:$PATH"
-# Ensure the user owns the application files
-# (Although COPY . /app creates files owned by root, for read-only it's usually fine,
-# but for safety and potential write needs, we should fix permissions or COPY with chown)
-# However, standard practice in HF Spaces is often just running as user 1000.
-# Let's use the --chown flag in COPY if possible, but standard COPY followed by chmod is also an option.
-# The simplest way for this file:
-USER root
 RUN chown -R user:user /app
 USER user
 EXPOSE 7860
-CMD ["python", "app.py"]

 # Create a non-root user and switch to it
 RUN useradd -m -u 1000 user
+# Set ownership
 RUN chown -R user:user /app
 USER user
+ENV PATH="/home/user/.local/bin:$PATH"
 EXPOSE 7860
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

templates/builder.html CHANGED Viewed

@@ -17,6 +17,7 @@
 <body class="bg-gray-50 text-gray-800 h-screen flex flex-col overflow-hidden">
     <div id="app" class="flex-1 flex flex-col h-full">
         <!-- Header -->
         <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6 shrink-0 z-10">
             <div class="flex items-center gap-3">
@@ -25,11 +26,22 @@
                 </div>
                 <h1 class="text-xl font-bold text-gray-900 tracking-tight">Interactive Checklist Pro</h1>
             </div>
-            <div class="flex items-center gap-4">
                 <button @click="downloadHTML" :disabled="isExporting" class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-lg font-medium transition-colors shadow-sm disabled:opacity-50">
                     <i class="ph ph-download-simple" v-if="!isExporting"></i>
                     <i class="ph ph-spinner animate-spin" v-else></i>
-                    {{ isExporting ? '生成中...' : '导出单文件 HTML' }}
                 </button>
             </div>
         </header>
@@ -186,9 +198,10 @@
             </div>
         </div>
     </div>
     <script>
-        const { createApp, ref, computed } = Vue;
         createApp({
             setup() {
@@ -217,6 +230,22 @@
                     ]
                 });
                 const isExporting = ref(false);
                 const themeColors = [
@@ -333,4 +362,43 @@
         }).mount('#app');
     </script>
 </body>
 </html>

 <body class="bg-gray-50 text-gray-800 h-screen flex flex-col overflow-hidden">
     <div id="app" class="flex-1 flex flex-col h-full">
+        {% raw %}
         <!-- Header -->
         <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6 shrink-0 z-10">
             <div class="flex items-center gap-3">
                 </div>
                 <h1 class="text-xl font-bold text-gray-900 tracking-tight">Interactive Checklist Pro</h1>
             </div>
+            <div class="flex items-center gap-2">
+                <div class="flex items-center gap-1 mr-2 border-r border-gray-200 pr-3">
+                    <button @click="importJSON" class="text-gray-500 hover:text-indigo-600 p-2 rounded-lg transition" title="导入配置 (Import JSON)">
+                        <i class="ph ph-upload-simple text-lg"></i>
+                    </button>
+                    <button @click="exportJSON" class="text-gray-500 hover:text-indigo-600 p-2 rounded-lg transition" title="备份配置 (Export JSON)">
+                        <i class="ph ph-floppy-disk text-lg"></i>
+                    </button>
+                    <button @click="clearStorage" class="text-gray-400 hover:text-red-600 p-2 rounded-lg transition" title="重置 (Reset)">
+                        <i class="ph ph-arrow-counter-clockwise text-lg"></i>
+                    </button>
+                </div>
                 <button @click="downloadHTML" :disabled="isExporting" class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2 rounded-lg font-medium transition-colors shadow-sm disabled:opacity-50">
                     <i class="ph ph-download-simple" v-if="!isExporting"></i>
                     <i class="ph ph-spinner animate-spin" v-else></i>
+                    <span v-text="isExporting ? '生成中...' : '导出单文件 HTML'"></span>
                 </button>
             </div>
         </header>
             </div>
         </div>
     </div>
+    {% endraw %}
     <script>
+        const { createApp, ref, computed, watch, onMounted } = Vue;
         createApp({
             setup() {
                     ]
                 });
+                // Auto-save logic
+                onMounted(() => {
+                    const saved = localStorage.getItem('checklist_pro_draft');
+                    if (saved) {
+                        try {
+                            checklist.value = JSON.parse(saved);
+                        } catch (e) {
+                            console.error('Failed to load draft', e);
+                        }
+                    }
+                });
+                watch(checklist, (newVal) => {
+                    localStorage.setItem('checklist_pro_draft', JSON.stringify(newVal));
+                }, { deep: true });
                 const isExporting = ref(false);
                 const themeColors = [
         }).mount('#app');
     </script>
 </body>
+</html>
+                        const file = e.target.files[0];
+                        if (!file) return;
+                        const reader = new FileReader();
+                        reader.readAsText(file, 'UTF-8');
+                        reader.onload = readerEvent => {
+                            try {
+                                const content = readerEvent.target.result;
+                                checklist.value = JSON.parse(content);
+                            } catch (e) {
+                                alert('Invalid JSON file');
+                            }
+                        }
+                    }
+                    input.click();
+                };
+                const clearStorage = () => {
+                    if(confirm('确定要清空本地缓存并重置为默认值吗？此操作无法撤销。')) {
+                        localStorage.removeItem('checklist_pro_draft');
+                        location.reload();
+                    }
+                };
+                return {
+                    checklist,
+                    themeColors,
+                    currentThemeClass,
+                    currentThemeTextClass,
+                    totalItems,
+                    addGroup, removeGroup, moveGroup,
+                    addItem, removeItem, moveItem,
+                    downloadHTML, isExporting,
+                    exportJSON, importJSON, clearStorage
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
 </html>