Spaces:

duqing2026
/

b2b-case-study-studio

Sleeping

App Files Files Community

duqing2026 commited on Jan 30

Commit

65e17dc

0 Parent(s):

init: b2b-case-study-studio

Browse files

Files changed (5) hide show

Dockerfile +13 -0
README.md +35 -0
app.py +27 -0
requirements.txt +1 -0
templates/index.html +434 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,13 @@

+FROM python:3.11-slim
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+WORKDIR /app
+COPY requirements.txt /app/requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . /app
+EXPOSE 7860
+CMD ["python", "app.py"]

README.md ADDED Viewed

	@@ -0,0 +1,35 @@

+---
+title: B2B 案例研究工坊
+emoji: 📈
+colorFrom: indigo
+colorTo: violet
+sdk: docker
+app_port: 7860
+short_description: 生成高转化率的 B2B 案例研究页面，支持代码/图片/JSON 导出。
+---
+# B2B 案例研究工坊 (B2B Case Study Studio)
+一个用于快速构建高转化率“客户成功案例 / 案例研究”页面的可视化工具。面向 SaaS/B2B 团队与代理商，支持结构化编辑（挑战、方案、结果、KPI、证言），多主题预览，并一键导出 HTML 代码嵌入官网或落地页。还支持图片与配置（JSON）导出，便于复用与团队协作。
+## 功能特点
+- 可视化编辑：公司信息、背景挑战、解决方案、结果收益、KPI 指标、客户证言
+- 多主题布局：经典、极简、主视觉高亮
+- 一键导出：HTML 代码、PNG 图片、JSON 配置
+- 本地持久化：自动保存到浏览器 LocalStorage
+- 纯前端运行：无外部 API 依赖，中文界面
+- Hugging Face 兼容：Docker 部署，端口 7860
+## 使用方法
+1. 左侧填写公司与案例内容；添加/编辑 KPI 与证言
+2. 选择主题，右侧实时预览完整案例页
+3. 点击“导出 HTML 代码”，复制到你的站点（需引入 Tailwind CSS）
+4. 可导出 PNG 图片用于营销素材；导出/导入 JSON 便于协作
+## 技术栈
+- Backend: Flask
+- Frontend: 原生 HTML/CSS/JS + Vue 3
+- Deploy: Docker（Hugging Face Spaces）
+## 许可证
+MIT

app.py ADDED Viewed

	@@ -0,0 +1,27 @@

+from flask import Flask, render_template, send_from_directory
+import os
+app = Flask(__name__, static_folder='static', template_folder='templates')
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/health')
+def health():
+    return "OK", 200
+@app.route('/static/<path:path>')
+def send_static(path):
+    return send_from_directory('static', path)
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('index.html'), 404
+@app.errorhandler(500)
+def internal_server_error(e):
+    return "Internal Server Error: " + str(e), 500
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False)

requirements.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Flask==2.3.3

templates/index.html ADDED Viewed

	@@ -0,0 +1,434 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>B2B 案例研究工坊</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+  <style>
+    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
+    [v-cloak] { display: none; }
+  </style>
+</head>
+<body class="bg-gray-50 h-screen overflow-hidden">
+  <div id="app" v-cloak class="h-full flex flex-col">
+    <!-- 顶部栏 -->
+    <header class="bg-white border-b border-gray-200 px-6 py-3 flex justify-between items-center">
+      <div class="flex items-center gap-3">
+        <div class="bg-indigo-600 text-white p-2 rounded-lg">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7h18M3 12h18M3 17h18" />
+          </svg>
+        </div>
+        <h1 class="text-lg font-bold text-gray-800">B2B 案例研究工坊</h1>
+        <span class="ml-2 text-xs text-gray-500">用于生成高转化率的案例研究页面</span>
+      </div>
+      <div class="flex gap-2">
+        <button @click="showCodeModal = true" class="px-4 py-2 text-sm border border-gray-200 rounded-md hover:bg-gray-50">
+          导出 HTML 代码
+        </button>
+        <button @click="exportJSON" class="px-4 py-2 text-sm border border-gray-200 rounded-md hover:bg-gray-50">
+          导出配置 JSON
+        </button>
+        <label class="px-4 py-2 text-sm border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
+          导入配置 JSON
+          <input type="file" class="hidden" @change="importJSON" accept=".json">
+        </label>
+        <button @click="exportImage" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
+          导出图片
+        </button>
+      </div>
+    </header>
+    <div class="flex flex-1 overflow-hidden">
+      <!-- 左侧编辑器 -->
+      <aside class="w-[420px] bg-white border-r border-gray-200 overflow-y-auto">
+        <div class="p-5 space-y-6">
+          <section>
+            <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">公司信息</h3>
+            <div class="space-y-3">
+              <div>
+                <label class="block text-sm text-gray-600 mb-1">公司名称</label>
+                <input v-model="form.company.name" type="text" class="w-full border rounded px-3 py-2 text-sm" placeholder="如：某某科技（Demo）">
+              </div>
+              <div class="grid grid-cols-2 gap-3">
+                <div>
+                  <label class="block text-sm text-gray-600 mb-1">行业</label>
+                  <input v-model="form.company.industry" type="text" class="w-full border rounded px-3 py-2 text-sm" placeholder="AI / SaaS / 电商">
+                </div>
+                <div>
+                  <label class="block text-sm text-gray-600 mb-1">地区</label>
+                  <input v-model="form.company.region" type="text" class="w-full border rounded px-3 py-2 text-sm" placeholder="中国 / 美国 / 欧洲">
+                </div>
+              </div>
+              <div>
+                <label class="block text-sm text-gray-600 mb-1">Logo 链接（可选）</label>
+                <input v-model="form.company.logo" type="text" class="w-full border rounded px-3 py-2 text-sm" placeholder="https://.../logo.png">
+              </div>
+            </div>
+          </section>
+          <section>
+            <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">案例内容</h3>
+            <div class="space-y-3">
+              <div>
+                <label class="block text-sm text-gray-600 mb-1">背景与挑战</label>
+                <textarea v-model="form.story.challenge" rows="3" class="w-full border rounded px-3 py-2 text-sm resize-none" placeholder="是什么业务背景？遇到什么问题？"></textarea>
+              </div>
+              <div>
+                <label class="block text-sm text-gray-600 mb-1">解决方案</label>
+                <textarea v-model="form.story.solution" rows="3" class="w-full border rounded px-3 py-2 text-sm resize-none" placeholder="给出了怎样的方案？包含哪些关键策略/功能？"></textarea>
+              </div>
+              <div>
+                <label class="block text-sm text-gray-600 mb-1">结果与收益</label>
+                <textarea v-model="form.story.results" rows="3" class="w-full border rounded px-3 py-2 text-sm resize-none" placeholder="带来了哪些量化或质化结果？"></textarea>
+              </div>
+            </div>
+          </section>
+          <section>
+            <div class="flex justify-between items-center mb-3">
+              <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider">关键指标（KPI）</h3>
+              <button @click="addKpi" class="text-xs text-indigo-600">添加</button>
+            </div>
+            <div class="space-y-3">
+              <div v-for="(k, i) in form.kpis" :key="i" class="grid grid-cols-3 gap-2">
+                <input v-model="k.name" type="text" class="border rounded px-2 py-1 text-sm" placeholder="如：转化率">
+                <input v-model="k.value" type="text" class="border rounded px-2 py-1 text-sm" placeholder="如：+38%">
+                <input v-model="k.delta" type="text" class="border rounded px-2 py-1 text-sm" placeholder="如：同比 +12%">
+              </div>
+            </div>
+          </section>
+          <section>
+            <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">客户证言</h3>
+            <div class="space-y-3">
+              <textarea v-model="form.quote.text" rows="2" class="w-full border rounded px-3 py-2 text-sm resize-none" placeholder="输入客户评价（短句）"></textarea>
+              <div class="grid grid-cols-2 gap-3">
+                <input v-model="form.quote.author" type="text" class="border rounded px-3 py-2 text-sm" placeholder="姓名">
+                <input v-model="form.quote.title" type="text" class="border rounded px-3 py-2 text-sm" placeholder="职位/公司">
+              </div>
+            </div>
+          </section>
+          <section>
+            <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">布局与主题</h3>
+            <div class="grid grid-cols-3 gap-2">
+              <button v-for="t in themes" :key="t.id"
+                      @click="config.theme = t.id"
+                      :class="['h-9 rounded border text-xs', config.theme === t.id ? 'ring-2 ring-indigo-500' : '']">
+                [[ t.name ]]
+              </button>
+            </div>
+            <div class="mt-3">
+              <label class="block text-sm text-gray-600 mb-1">CTA 文案</label>
+              <input v-model="config.ctaText" type="text" class="w-full border rounded px-3 py-2 text-sm" placeholder="如：预约演示 / 联系我们 / 立即试用">
+            </div>
+          </section>
+        </div>
+      </aside>
+      <!-- 右侧预览 -->
+      <main class="flex-1 bg-gray-100 overflow-auto p-8">
+        <div id="capture-area" class="max-w-6xl mx-auto">
+          <!-- 主题：经典 -->
+          <section v-if="config.theme === 'classic'" class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div class="px-8 pt-8">
+              <div class="flex items-center gap-4">
+                <img v-if="form.company.logo" :src="form.company.logo" alt="logo" class="w-10 h-10 rounded">
+                <div>
+                  <h2 class="text-2xl font-bold">[[ form.company.name ]] 案例研究</h2>
+                  <p class="text-gray-500 text-sm">行业：[[ form.company.industry ]] · 地区：[[ form.company.region ]]</p>
+                </div>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
+                <div class="md:col-span-2">
+                  <h3 class="text-lg font-semibold mb-2">背景与挑战</h3>
+                  <p class="text-gray-700 leading-7">[[ form.story.challenge ]]</p>
+                  <h3 class="text-lg font-semibold mt-5 mb-2">解决方案</h3>
+                  <p class="text-gray-700 leading-7">[[ form.story.solution ]]</p>
+                  <h3 class="text-lg font-semibold mt-5 mb-2">结果与收益</h3>
+                  <p class="text-gray-700 leading-7">[[ form.story.results ]]</p>
+                </div>
+                <div class="space-y-3">
+                  <div v-for="(k, i) in form.kpis" :key="i" class="bg-indigo-50 border border-indigo-100 rounded-lg p-4">
+                    <div class="text-xs text-indigo-600 font-medium">[[ k.name ]]</div>
+                    <div class="text-2xl font-bold text-indigo-700 mt-1">[[ k.value ]]</div>
+                    <div class="text-xs text-indigo-500 mt-1">[[ k.delta ]]</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="px-8 py-6 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
+              <blockquote class="text-gray-700 italic max-w-3xl">“[[ form.quote.text ]]” — [[ form.quote.author ]], [[ form.quote.title ]]</blockquote>
+              <a href="#" class="px-5 py-2.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">[[ config.ctaText ]]</a>
+            </div>
+          </section>
+          <!-- 主题：极简 -->
+          <section v-if="config.theme === 'minimal'" class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+            <div class="px-8 pt-8">
+              <h2 class="text-3xl font-bold tracking-tight">[[ form.company.name ]] · 成功故事</h2>
+              <p class="text-gray-500 mt-1">[[ form.company.industry ]] · [[ form.company.region ]]</p>
+              <div class="grid md:grid-cols-2 gap-10 mt-8">
+                <div class="space-y-6">
+                  <div>
+                    <h3 class="text-sm font-semibold text-gray-800 uppercase">挑战</h3>
+                    <p class="text-gray-700 leading-7 mt-2">[[ form.story.challenge ]]</p>
+                  </div>
+                  <div>
+                    <h3 class="text-sm font-semibold text-gray-800 uppercase">解决方案</h3>
+                    <p class="text-gray-700 leading-7 mt-2">[[ form.story.solution ]]</p>
+                  </div>
+                  <div>
+                    <h3 class="text-sm font-semibold text-gray-800 uppercase">结果</h3>
+                    <p class="text-gray-700 leading-7 mt-2">[[ form.story.results ]]</p>
+                  </div>
+                </div>
+                <div class="grid sm:grid-cols-2 gap-4">
+                  <div v-for="(k, i) in form.kpis" :key="i" class="rounded-lg border border-gray-200 p-4">
+                    <div class="text-xs text-gray-500">[[ k.name ]]</div>
+                    <div class="text-3xl font-bold mt-1">[[ k.value ]]</div>
+                    <div class="text-xs text-gray-400 mt-1">[[ k.delta ]]</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="px-8 py-6 flex justify-end bg-gray-50 border-t">
+              <a href="#" class="px-5 py-2.5 bg-gray-900 text-white rounded-md hover:bg-black">[[ config.ctaText ]]</a>
+            </div>
+          </section>
+          <!-- 主题：主视觉 + 高亮 -->
+          <section v-if="config.theme === 'hero'" class="rounded-xl overflow-hidden">
+            <div class="bg-gradient-to-br from-indigo-600 to-violet-600 text-white px-8 py-12">
+              <div class="max-w-4xl">
+                <h2 class="text-3xl font-extrabold">与 [[ form.company.name ]] 的合作成果</h2>
+                <p class="mt-3 opacity-90">[[ form.story.challenge ]]</p>
+                <p class="mt-3 opacity-90">[[ form.story.solution ]]</p>
+              </div>
+              <div class="grid sm:grid-cols-3 gap-4 mt-8">
+                <div v-for="(k, i) in form.kpis" :key="i" class="bg-white/10 rounded-lg p-4">
+                  <div class="text-sm opacity-90">[[ k.name ]]</div>
+                  <div class="text-3xl font-bold mt-1">[[ k.value ]]</div>
+                  <div class="text-xs opacity-80 mt-1">[[ k.delta ]]</div>
+                </div>
+              </div>
+            </div>
+            <div class="bg-white px-8 py-8">
+              <div class="flex items-center justify-between">
+                <blockquote class="text-gray-700 italic max-w-2xl">“[[ form.quote.text ]]” — [[ form.quote.author ]], [[ form.quote.title ]]</blockquote>
+                <a href="#" class="px-5 py-2.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">[[ config.ctaText ]]</a>
+              </div>
+              <div class="mt-6">
+                <h3 class="text-lg font-semibold mb-2">更多成果细节</h3>
+                <p class="text-gray-700 leading-7">[[ form.story.results ]]</p>
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+    <!-- 代码导出弹窗 -->
+    <div v-if="showCodeModal" class="fixed inset-0 bg-black/50 flex items-center justify-center p-4" @click.self="showCodeModal=false">
+      <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl h-[80vh] flex flex-col overflow-hidden">
+        <div class="p-4 border-b flex justify-between items-center bg-gray-50">
+          <h3 class="font-bold text-gray-800">导出代码（Tailwind CSS）</h3>
+          <button @click="showCodeModal=false" class="text-gray-400 hover:text-gray-600">✕</button>
+        </div>
+        <div class="flex-1 relative">
+          <textarea readonly class="w-full h-full p-4 font-mono text-sm text-gray-700 bg-gray-50" :value="generatedCode"></textarea>
+          <button @click="copyCode" class="absolute top-4 right-4 bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm">复制</button>
+        </div>
+        <div class="p-3 border-t bg-gray-50 text-xs text-gray-500">
+          提示：此代码依赖 Tailwind CSS，请在你的项目中引入。
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    const { createApp, ref, computed, watch, onMounted } = Vue;
+    createApp({
+      delimiters: ['[[', ']]'],
+      setup() {
+        const showCodeModal = ref(false);
+        const form = ref({
+          company: { name: '某某科技（Demo）', industry: 'SaaS', region: '中国', logo: '' },
+          story: {
+            challenge: '面对线索增长与转化效率低下的问题，销售与市场团队缺乏高质量的案例资产来支撑增长漏斗。',
+            solution: '使用我们的“案例研究工坊”，统一结构化收集案例内容，输出高转化率页面，同时支持导出代码嵌入官网与着陆页。',
+            results: '在上���后的 30 天内，来自案例页的试用注册提升 38%，商机转化率提升 12%，销售周期缩短 15%。'
+          },
+          kpis: [
+            { name: '注册提升', value: '+38%', delta: '月环比 +12%' },
+            { name: '转化率', value: '+12%', delta: '同比 +8%' },
+            { name: '销售周期', value: '-15%', delta: '中位数 45→38 天' }
+          ],
+          quote: { text: '这是一个极具实用价值的工具，让我们的案例页成为增长引擎。', author: '张三', title: '市场总监，某某科技' }
+        });
+        const themes = [
+          { id: 'classic', name: '经典' },
+          { id: 'minimal', name: '极简' },
+          { id: 'hero', name: '主视觉' }
+        ];
+        const config = ref({ theme: 'classic', ctaText: '预约演示' });
+        const addKpi = () => {
+          form.value.kpis.push({ name: '指标', value: '+0%', delta: '说明' });
+        };
+        onMounted(() => {
+          const saved = localStorage.getItem('b2b-case-study-data');
+          if (saved) {
+            try {
+              const data = JSON.parse(saved);
+              if (data.form) form.value = data.form;
+              if (data.config) config.value = data.config;
+            } catch (e) {}
+          }
+        });
+        watch([form, config], () => {
+          localStorage.setItem('b2b-case-study-data', JSON.stringify({ form: form.value, config: config.value }));
+        }, { deep: true });
+        // 代码生成（根据当前主题）
+        const generatedCode = computed(() => {
+          const f = form.value;
+          const c = config.value;
+          const kpiHtml = f.kpis.map(k => `
+            <div class="rounded-lg border ${c.theme==='classic'?'bg-indigo-50 border-indigo-100':'border-gray-200'} p-4">
+              <div class="text-xs ${c.theme==='classic'?'text-indigo-600':'text-gray-500'}">${k.name}</div>
+              <div class="text-2xl font-bold ${c.theme==='classic'?'text-indigo-700':'text-gray-900'} mt-1">${k.value}</div>
+              <div class="text-xs ${c.theme==='classic'?'text-indigo-500':'text-gray-400'} mt-1">${k.delta}</div>
+            </div>
+          `).join('');
+          let header = `
+            <div class="flex items-center gap-4">
+              ${f.company.logo ? `<img src="${f.company.logo}" alt="logo" class="w-10 h-10 rounded">` : ``}
+              <div>
+                <h2 class="text-2xl font-bold">${f.company.name} 案例研究</h2>
+                <p class="text-gray-500 text-sm">行业：${f.company.industry} · 地区：${f.company.region}</p>
+              </div>
+            </div>
+          `;
+          let mainClassic = `
+            <section class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+              <div class="px-8 pt-8">
+                ${header}
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
+                  <div class="md:col-span-2">
+                    <h3 class="text-lg font-semibold mb-2">背景与挑战</h3>
+                    <p class="text-gray-700 leading-7">${f.story.challenge}</p>
+                    <h3 class="text-lg font-semibold mt-5 mb-2">解决方案</h3>
+                    <p class="text-gray-700 leading-7">${f.story.solution}</p>
+                    <h3 class="text-lg font-semibold mt-5 mb-2">结果与收益</h3>
+                    <p class="text-gray-700 leading-7">${f.story.results}</p>
+                  </div>
+                  <div class="space-y-3">${kpiHtml}</div>
+                </div>
+              </div>
+              <div class="px-8 py-6 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
+                <blockquote class="text-gray-700 italic max-w-3xl">“${f.quote.text}” — ${f.quote.author}, ${f.quote.title}</blockquote>
+                <a href="#" class="px-5 py-2.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">${c.ctaText}</a>
+              </div>
+            </section>
+          `;
+          let code = mainClassic;
+          if (c.theme === 'minimal') {
+            code = `
+              <section class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                <div class="px-8 pt-8">
+                  <h2 class="text-3xl font-bold tracking-tight">${f.company.name} · 成功故事</h2>
+                  <p class="text-gray-500 mt-1">${f.company.industry} · ${f.company.region}</p>
+                  <div class="grid md:grid-cols-2 gap-10 mt-8">
+                    <div class="space-y-6">
+                      <div><h3 class="text-sm font-semibold text-gray-800 uppercase">挑战</h3><p class="text-gray-700 leading-7 mt-2">${f.story.challenge}</p></div>
+                      <div><h3 class="text-sm font-semibold text-gray-800 uppercase">解决方案</h3><p class="text-gray-700 leading-7 mt-2">${f.story.solution}</p></div>
+                      <div><h3 class="text-sm font-semibold text-gray-800 uppercase">结果</h3><p class="text-gray-700 leading-7 mt-2">${f.story.results}</p></div>
+                    </div>
+                    <div class="grid sm:grid-cols-2 gap-4">${kpiHtml}</div>
+                  </div>
+                </div>
+                <div class="px-8 py-6 flex justify-end bg-gray-50 border-t">
+                  <a href="#" class="px-5 py-2.5 bg-gray-900 text-white rounded-md hover:bg-black">${c.ctaText}</a>
+                </div>
+              </section>
+            `;
+          }
+          if (c.theme === 'hero') {
+            code = `
+              <section class="rounded-xl overflow-hidden">
+                <div class="bg-gradient-to-br from-indigo-600 to-violet-600 text-white px-8 py-12">
+                  <div class="max-w-4xl">
+                    <h2 class="text-3xl font-extrabold">与 ${f.company.name} 的合作成果</h2>
+                    <p class="mt-3 opacity-90">${f.story.challenge}</p>
+                    <p class="mt-3 opacity-90">${f.story.solution}</p>
+                  </div>
+                  <div class="grid sm:grid-cols-3 gap-4 mt-8">
+                    ${f.kpis.map(k => `
+                      <div class="bg-white/10 rounded-lg p-4"><div class="text-sm opacity-90">${k.name}</div><div class="text-3xl font-bold mt-1">${k.value}</div><div class="text-xs opacity-80 mt-1">${k.delta}</div></div>
+                    `).join('')}
+                  </div>
+                </div>
+                <div class="bg-white px-8 py-8">
+                  <div class="flex items-center justify-between">
+                    <blockquote class="text-gray-700 italic max-w-2xl">“${f.quote.text}” — ${f.quote.author}, ${f.quote.title}</blockquote>
+                    <a href="#" class="px-5 py-2.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">${c.ctaText}</a>
+                  </div>
+                  <div class="mt-6">
+                    <h3 class="text-lg font-semibold mb-2">更多成果细节</h3>
+                    <p class="text-gray-700 leading-7">${f.story.results}</p>
+                  </div>
+                </div>
+              </section>
+            `;
+          }
+          return `<!-- Case Study Section (Tailwind CSS) -->\n${code}`;
+        });
+        const copyCode = async () => {
+          try { await navigator.clipboard.writeText(generatedCode.value); alert('已复制到剪贴板'); }
+          catch { alert('复制失败，请手动复制'); }
+        };
+        const exportJSON = () => {
+          const data = { form: form.value, config: config.value, version: '1.0' };
+          const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a'); a.href = url; a.download = 'case-study-config.json'; a.click(); URL.revokeObjectURL(url);
+        };
+        const importJSON = (e) => {
+          const file = e.target.files[0]; if (!file) return;
+          const reader = new FileReader();
+          reader.onload = (ev) => {
+            try {
+              const data = JSON.parse(ev.target.result);
+              if (data.form) form.value = data.form;
+              if (data.config) config.value = data.config;
+              alert('配置导入成功');
+            } catch { alert('无效的 JSON 文件'); }
+          };
+          reader.readAsText(file); e.target.value = '';
+        };
+        const exportImage = async () => {
+          const el = document.getElementById('capture-area');
+          try {
+            const canvas = await html2canvas(el, { backgroundColor: null, scale: 2 });
+            const link = document.createElement('a'); link.download = 'case-study.png'; link.href = canvas.toDataURL(); link.click();
+          } catch { alert('导出失败，请重试'); }
+        };
+        return {
+          form, config, themes, addKpi,
+          showCodeModal, generatedCode, copyCode,
+          exportJSON, importJSON, exportImage
+        };
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>