修复 Flask 模板与 Vue 插值冲突，新增健康检查，增强导入与导出功能，补充默认示例数据

README.md

@@ -6,6 +6,7 @@ colorTo: indigo
 sdk: docker
 pinned: false
 app_port: 7860
+short_description: 商业画布大师
 ---
 
 # 商业画布大师 (Lean Canvas Master)

app.py

@@ -10,5 +10,9 @@ def index():
 def send_static(path):
     return send_from_directory('static', path)
 
+@app.route('/health')
+def health():
+    return {'status': 'ok'}, 200
+
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860)

static/js/app.js

@@ -12,13 +12,66 @@ const CanvasCell = {
             this.$emit('update:items', newItems);
         },
         updateItem(index, event) {
-            const newItems = [...this.items];
-            newItems[index] = event.target.innerText;
+            const text = (event.target.innerText || '').trim();
+            let newItems = [...this.items];
+            if (text.length === 0) {
+                newItems = newItems.filter((_, i) => i !== index);
+            } else {
+                newItems[index] = text;
+            }
             this.$emit('update:items', newItems);
         }
     }
 };
 
+const DEFAULT_CANVAS = {
+    problem: [
+        '客户难以清晰定义问题与目标',
+        '缺乏系统化的商业模型梳理工具',
+        '方案与市场反馈缺少快速迭代机制'
+    ],
+    segments: [
+        '初创团队与个人创业者',
+        '产品经理/运营负责人',
+        '创新项目负责人（高校/企业）'
+    ],
+    uvp: [
+        '一体化商业画布工具，所见即所得',
+        '支持本地保存与导入导出，隐私友好',
+        '快速导出图片与PDF，便于汇报与协作'
+    ],
+    solution: [
+        '提供九宫格画布结构与编辑能力',
+        '引导式默认示例，降低上手门槛',
+        '支持持久化与分享导出能力'
+    ],
+    channels: [
+        '社媒与社区口碑传播',
+        '开发者/创业者社区投放',
+        '线下沙龙与培训合作'
+    ],
+    revenue: [
+        '基础版免费，增值版订阅',
+        '企业定制授权与部署',
+        '培训与咨询服务'
+    ],
+    cost: [
+        '研发与运维费用',
+        '宣传与市场费用',
+        '内容与培训成本'
+    ],
+    metrics: [
+        '周/日活跃用户',
+        '导出次数与分享量',
+        '留存与转化率'
+    ],
+    advantage: [
+        '极简本地优先，无外部依赖',
+        '中文体验优化与示例指导',
+        '轻量架构便于扩展与部署'
+    ]
+};
+
 const app = Vue.createApp({
     components: {
         'canvas-cell': CanvasCell
@@ -57,6 +110,9 @@ const app = Vue.createApp({
             } catch (e) {
                 console.error('Failed to load saved data', e);
             }
+        } else {
+            this.projectTitle = '示例项目';
+            this.canvas = { ...DEFAULT_CANVAS };
         }
     },
     watch: {
@@ -118,13 +174,16 @@ const app = Vue.createApp({
             reader.onload = (e) => {
                 try {
                     const data = JSON.parse(e.target.result);
-                    if (data.canvas) {
-                        this.projectTitle = data.projectTitle || '';
-                        this.canvas = data.canvas;
-                        alert('导入成功！');
-                    } else {
-                        alert('无效的文件格式');
-                    }
+                    const expectedKeys = ['problem','segments','uvp','solution','channels','revenue','cost','metrics','advantage'];
+                    const canvasObj = (data && typeof data.canvas === 'object') ? data.canvas : {};
+                    const sanitized = {};
+                    expectedKeys.forEach(k => {
+                        const v = canvasObj[k];
+                        sanitized[k] = Array.isArray(v) ? v.map(x => String(x).trim()).filter(x => x.length > 0) : [];
+                    });
+                    this.projectTitle = typeof data.projectTitle === 'string' ? data.projectTitle : '';
+                    this.canvas = { ...this.canvas, ...sanitized };
+                    alert('导入成功！');
                 } catch (err) {
                     alert('文件解析失败');
                 }
@@ -152,6 +211,40 @@ const app = Vue.createApp({
                 console.error('Export failed:', err);
                 alert('图片导出失败，请重试');
             }
+        },
+        async exportPDF() {
+            const element = document.getElementById('canvas-area');
+            try {
+                const canvas = await html2canvas(element, {
+                    scale: 2,
+                    backgroundColor: this.isDark ? '#1f2937' : '#ffffff',
+                    useCORS: true
+                });
+                const imgData = canvas.toDataURL('image/png');
+                
+                const { jsPDF } = window.jspdf || {};
+                if (!jsPDF) {
+                    alert('PDF库加载失败，请稍后重试');
+                    return;
+                }
+                const pdf = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' });
+                const pageWidth = pdf.internal.pageSize.getWidth();
+                const pageHeight = pdf.internal.pageSize.getHeight();
+                
+                const imgWidth = canvas.width;
+                const imgHeight = canvas.height;
+                const scale = Math.min(pageWidth / imgWidth, pageHeight / imgHeight);
+                const renderWidth = imgWidth * scale;
+                const renderHeight = imgHeight * scale;
+                const offsetX = (pageWidth - renderWidth) / 2;
+                const offsetY = (pageHeight - renderHeight) / 2;
+                
+                pdf.addImage(imgData, 'PNG', offsetX, offsetY, renderWidth, renderHeight);
+                pdf.save(`lean-canvas-${this.projectTitle || 'untitled'}.pdf`);
+            } catch (err) {
+                console.error('PDF export failed:', err);
+                alert('PDF导出失败，请重试');
+            }
         }
     }
 });

templates/index.html

@@ -53,6 +53,7 @@
     </style>
 </head>
 <body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-300">
+    {% raw %}
     <div id="app" class="min-h-screen flex flex-col">
         <!-- Header -->
         <header class="bg-white dark:bg-gray-800 shadow-sm p-4 sticky top-0 z-50">
@@ -67,19 +68,22 @@
                         <i :class="isDark ? 'fa-solid fa-sun text-yellow-400' : 'fa-solid fa-moon text-gray-600'"></i>
                     </button>
                     <div class="h-6 w-px bg-gray-300 dark:bg-gray-600 mx-1"></div>
-                    <button @click="clearCanvas" class="btn-secondary">
+                    <button @click="clearCanvas" class="px-3 py-1.5 rounded text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition flex items-center">
                         <i class="fa-solid fa-trash-can mr-1"></i> 清空
                     </button>
-                    <button @click="saveJSON" class="btn-secondary">
+                    <button @click="saveJSON" class="px-3 py-1.5 rounded text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition flex items-center">
                         <i class="fa-solid fa-download mr-1"></i> 保存JSON
                     </button>
-                    <label class="btn-secondary cursor-pointer">
+                    <label class="px-3 py-1.5 rounded text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition flex items-center cursor-pointer">
                         <i class="fa-solid fa-upload mr-1"></i> 导入JSON
                         <input type="file" @change="loadJSON" accept=".json" class="hidden">
                     </label>
-                    <button @click="exportImage" class="btn-primary bg-blue-600 text-white hover:bg-blue-700">
+                    <button @click="exportImage" class="px-3 py-1.5 rounded text-sm flex items-center transition shadow-sm bg-blue-600 text-white hover:bg-blue-700">
                         <i class="fa-solid fa-image mr-1"></i> 导出图片
                     </button>
+                    <button @click="exportPDF" class="px-3 py-1.5 rounded text-sm flex items-center transition shadow-sm bg-green-600 text-white hover:bg-green-700">
+                        <i class="fa-solid fa-file-pdf mr-1"></i> 导出PDF
+                    </button>
                 </div>
             </div>
         </header>
@@ -221,15 +225,9 @@
         </div>
     </script>
 
-    <style>
-        .btn-secondary {
-            @apply px-3 py-1.5 rounded text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition flex items-center;
-        }
-        .btn-primary {
-            @apply px-3 py-1.5 rounded text-sm flex items-center transition shadow-sm;
-        }
-    </style>
+    
 
     <script src="/static/js/app.js"></script>
+    {% endraw %}
 </body>
 </html>