优化

app.py

@@ -1,5 +1,4 @@
-from flask import Flask, render_template, send_file, request
-import os
+from flask import Flask, render_template
 
 app = Flask(__name__)
 app.jinja_env.variable_start_string = '[['

templates/index.html

@@ -94,6 +94,9 @@
                                 <button @click="exportHTML" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md border-t border-gray-100 mt-1 pt-2">
                                     <i class="fa-solid fa-file-export mr-2 text-gray-400"></i> 导出独立 HTML
                                 </button>
+                                <button @click="resetToExample" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded-md border-t border-gray-100 mt-1 pt-2">
+                                    <i class="fa-solid fa-rotate-left mr-2 text-gray-400"></i> 重置为示例
+                                </button>
                             </div>
                         </div>
                         <input type="file" ref="fileInput" @change="importJSON" class="hidden" accept=".json">
@@ -134,6 +137,10 @@
 
                     <!-- Checklist Items -->
                     <div class="space-y-8">
+                        <div v-if="!checklist.sections || checklist.sections.length === 0" class="text-center text-gray-400 py-16">
+                            <i class="fa-regular fa-rectangle-list text-4xl mb-3"></i>
+                            <div class="text-sm">暂无章节，点击下方“添加新章节”开始编辑</div>
+                        </div>
                         <div v-for="(section, sIndex) in checklist.sections" :key="sIndex" class="group">
                             <!-- Section Header -->
                             <div class="flex items-center justify-between mb-4 pb-2 border-b border-gray-100">
@@ -203,8 +210,8 @@
                 const mode = ref('edit'); // edit, preview
                 const fileInput = ref(null);
                 
-                // Initial State
-                const checklist = ref({
+                // Example Data Factory
+                const exampleData = () => ({
                     title: '新产品发布检查清单',
                     description: '这是一个示例清单，帮助你按部就班地完成产品发布。你可以点击上方的“编辑”按钮来修改内容。',
                     sections: [
@@ -227,12 +234,42 @@
                     ]
                 });
 
+                // Normalize helper: 填充缺省字段并保证结构可用
+                const normalizeChecklist = (data) => {
+                    const fallback = exampleData();
+                    const out = typeof data === 'object' && data ? data : {};
+                    out.title = typeof out.title === 'string' ? out.title : fallback.title;
+                    out.description = typeof out.description === 'string' ? out.description : '';
+                    if (!Array.isArray(out.sections)) out.sections = [];
+                    out.sections = out.sections.map(sec => {
+                        const s = typeof sec === 'object' && sec ? sec : {};
+                        s.title = typeof s.title === 'string' ? s.title : '';
+                        if (!Array.isArray(s.items)) s.items = [];
+                        s.items = s.items.map(it => {
+                            const i = typeof it === 'object' && it ? it : {};
+                            i.text = typeof i.text === 'string' ? i.text : '';
+                            i.checked = typeof i.checked === 'boolean' ? i.checked : false;
+                            return i;
+                        });
+                        // 至少保留一个空项目，避免渲染异常
+                        if (s.items.length === 0) s.items = [{ text: '', checked: false }];
+                        return s;
+                    });
+                    // 如果完全没有章节，放入示例章节
+                    if (out.sections.length === 0) out.sections = fallback.sections;
+                    return out;
+                };
+
+                // Initial State
+                const checklist = ref(exampleData());
+
                 // Persistence
                 onMounted(() => {
                     const saved = localStorage.getItem('checklist-data');
                     if (saved) {
                         try {
-                            checklist.value = JSON.parse(saved);
+                            const loaded = JSON.parse(saved);
+                            checklist.value = normalizeChecklist(loaded);
                         } catch(e) { console.error('Load failed', e); }
                     }
                 });
@@ -303,7 +340,7 @@
                     reader.onload = (e) => {
                         try {
                             const data = JSON.parse(e.target.result);
-                            checklist.value = data;
+                            checklist.value = normalizeChecklist(data);
                             alert('导入成功！');
                         } catch (err) {
                             alert('导入失败：文件格式不正确');
@@ -317,8 +354,7 @@
                     // We will fetch the current page's HTML structure but inject the current data state
                     // and set the mode to 'preview' by default in the generated file.
                     // For simplicity, we'll create a template string here.
-                    
-                    const data = JSON.stringify(checklist.value).replace(/'/g, "\\'");
+                    const encoded = encodeURIComponent(JSON.stringify(checklist.value));
                     
                     const htmlContent = `<!DOCTYPE html>
 <html lang="zh-CN">
@@ -408,7 +444,7 @@
         const { createApp, ref, computed, watch, onMounted } = Vue;
         createApp({
             setup() {
-                const checklist = ref(JSON.parse('${data}'));
+                const checklist = ref(JSON.parse(decodeURIComponent('${encoded}')));
                 
                 // Local Storage for the exported file too!
                 const storageKey = 'checklist-export-' + checklist.value.title.replace(/\\s+/g, '-').toLowerCase();
@@ -475,7 +511,14 @@
                     importJSON,
                     exportHTML,
                     fileInput,
-                    triggerFileInput
+                    triggerFileInput,
+                    resetToExample: () => {
+                        if (confirm('确定重置为示例数据？此操作会覆盖当前内容。')) {
+                            const ex = exampleData();
+                            checklist.value = normalizeChecklist(ex);
+                            localStorage.setItem('checklist-data', JSON.stringify(checklist.value));
+                        }
+                    }
                 };
             }
         }).mount('#app');