Initial commit

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create data directory and set permissions
+RUN mkdir -p data && chmod 777 data
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -1,10 +1,61 @@
 ---
-title: Startup Valuation Engine
-emoji: 💻
+title: 创业估值与融资模拟引擎
+emoji: 💰
 colorFrom: green
-colorTo: green
+colorTo: indigo
 sdk: docker
 pinned: false
+short_description: 创业项目早期估值、融资稀释模拟及投资意向书生成工具。
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 创业估值与融资模拟引擎 (Startup Valuation & Deal Structuring Engine)
+
+一个专为早期创业者设计的综合工具，帮助你科学估值、模拟融资稀释，并生成标准的投资意向书摘要。
+
+## 核心功能
+
+1.  **多维度估值模型**
+    *   **Berkus Method**: 针对早期无收入项目的经典估值法，通过评估5个关键风险维度（创意、原型、团队、战略关系、销售）来计算估值。
+    *   **Scorecard Method (记分卡法)**: 通过对比行业平均估值，并根据团队、市场、产品等7个维度进行加权调整，得出更符合市场行情的估值。
+
+2.  **融资与股权稀释模拟 (Cap Table Simulator)**
+    *   直观的股权结构表计算。
+    *   支持 Pre-money 估值、融资金额、期权池 (Option Pool) 设置。
+    *   自动计算融资后的 Post-money 估值、每股价格以及创始人、投资人、期权池的持股比例。
+    *   可视化饼图展示。
+
+3.  **投资意向书生成器 (Term Sheet Lite)**
+    *   快速生成一份简易的投资条款清单 (Term Sheet)。
+    *   支持自定义清算优先权 (Liquidation Preference)、董事会席位分配等关键条款。
+    *   一键复制内容。
+
+4.  **专业报告导出**
+    *   生成包含项目概况、估值分析、拟议融资结构的专业报告。
+    *   支持打印为 PDF 格式，方便发送给投资人或合伙人。
+
+## 技术栈
+
+*   **Backend**: Python Flask
+*   **Frontend**: Vue.js 3, Tailwind CSS, Chart.js
+*   **Deployment**: Docker (Compatible with Hugging Face Spaces)
+
+## 本地运行
+
+```bash
+# 构建镜像
+docker build -t valuation-engine .
+
+# 运行容器
+docker run -p 7860:7860 valuation-engine
+```
+
+或者直接运行 Python:
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+## 许可证
+
+MIT License

app.py

@@ -0,0 +1,99 @@
+from flask import Flask, render_template, request, jsonify, send_file
+from werkzeug.exceptions import RequestEntityTooLarge
+import os
+import json
+import datetime
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+
+# Data storage path
+DATA_DIR = os.path.join(os.path.dirname(__file__), 'data')
+os.makedirs(DATA_DIR, exist_ok=True)
+
+@app.errorhandler(RequestEntityTooLarge)
+def handle_file_too_large(e):
+    return jsonify({"success": False, "message": "File too large. Maximum size is 16MB."}), 413
+
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('index.html'), 404
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/health')
+def health_check():
+    return "OK", 200
+
+@app.route('/api/save', methods=['POST'])
+def save_project():
+    try:
+        data = request.json
+        if not data:
+            return jsonify({"success": False, "message": "No data provided"}), 400
+            
+        project_name = data.get('projectName', 'untitled')
+        # Sanitize filename
+        safe_name = "".join([c for c in project_name if c.isalpha() or c.isdigit() or c in (' ', '-', '_')]).strip()
+        if not safe_name:
+            safe_name = 'untitled'
+        
+        filename = f"{safe_name}.json"
+        filepath = os.path.join(DATA_DIR, filename)
+        
+        with open(filepath, 'w', encoding='utf-8') as f:
+            json.dump(data, f, ensure_ascii=False, indent=2)
+            
+        return jsonify({"success": True, "message": "项目已保存", "filename": filename})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+@app.route('/api/load', methods=['GET'])
+def load_projects():
+    try:
+        if not os.path.exists(DATA_DIR):
+            os.makedirs(DATA_DIR, exist_ok=True)
+            
+        files = [f for f in os.listdir(DATA_DIR) if f.endswith('.json')]
+        projects = []
+        for f in files:
+            filepath = os.path.join(DATA_DIR, f)
+            try:
+                with open(filepath, 'r', encoding='utf-8') as file:
+                    data = json.load(file)
+                    projects.append({
+                        "filename": f,
+                        "projectName": data.get('projectName', f.replace('.json', '')),
+                        "updatedAt": datetime.datetime.fromtimestamp(os.path.getmtime(filepath)).strftime('%Y-%m-%d %H:%M:%S')
+                    })
+            except:
+                continue
+        # Sort by update time desc
+        projects.sort(key=lambda x: x['updatedAt'], reverse=True)
+        return jsonify({"success": True, "projects": projects})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+@app.route('/api/load/<filename>', methods=['GET'])
+def load_project_detail(filename):
+    try:
+        # Security check
+        if '..' in filename or not filename.endswith('.json'):
+            return jsonify({"success": False, "message": "Invalid filename"}), 400
+            
+        filepath = os.path.join(DATA_DIR, filename)
+        if not os.path.exists(filepath):
+            return jsonify({"success": False, "message": "File not found"}), 404
+            
+        with open(filepath, 'r', encoding='utf-8') as f:
+            data = json.load(f)
+            return jsonify({"success": True, "data": data})
+    except Exception as e:
+        return jsonify({"success": False, "message": str(e)}), 500
+
+if __name__ == '__main__':
+    # Use 7860 for Hugging Face Spaces default
+    port = int(os.environ.get('PORT', 7860))
+    app.run(debug=True, host='0.0.0.0', port=port)

requirements.txt

@@ -0,0 +1,2 @@
+flask==3.0.0
+gunicorn==21.2.0

templates/index.html

@@ -0,0 +1,753 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>创业估值与融资模拟引擎 | Startup Valuation Engine</title>
+    <script src="/static/js/tailwindcss.js"></script>
+    <script src="/static/js/vue.global.js"></script>
+    <script src="/static/js/chart.js"></script>
+    <script src="/static/js/html2canvas.min.js"></script>
+    <!-- Icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @media print {
+            .no-print { display: none !important; }
+            .print-only { display: block !important; }
+            body { background: white; }
+            .card { box-shadow: none; border: 1px solid #ddd; }
+        }
+        .slider-thumb::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            background: #4F46E5;
+            cursor: pointer;
+            border-radius: 50%;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+        
+        [v-cloak] { display: none; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 font-sans">
+    <div id="app" v-cloak>
+        <!-- Header -->
+        <header class="bg-indigo-600 text-white shadow-lg no-print">
+            <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+                <div class="flex items-center space-x-3">
+                    <i class="fa-solid fa-chart-line text-2xl"></i>
+                    <h1 class="text-xl font-bold">创业估值与融资模拟引擎</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button @click="loadDemoData" class="px-4 py-2 bg-indigo-500 hover:bg-indigo-400 rounded-md text-sm transition flex items-center">
+                        <i class="fa-solid fa-magic mr-2"></i> 演示数据
+                    </button>
+                    <button @click="saveProject" class="px-4 py-2 bg-indigo-500 hover:bg-indigo-400 rounded-md text-sm transition flex items-center">
+                        <i class="fa-solid fa-save mr-2"></i> 保存
+                    </button>
+                    <button @click="showLoadModal = true" class="px-4 py-2 bg-indigo-500 hover:bg-indigo-400 rounded-md text-sm transition flex items-center">
+                        <i class="fa-solid fa-folder-open mr-2"></i> 打开
+                    </button>
+                    <button @click="printReport" class="px-4 py-2 bg-white text-indigo-600 hover:bg-gray-100 rounded-md text-sm font-semibold transition flex items-center">
+                        <i class="fa-solid fa-print mr-2"></i> 打印报告
+                    </button>
+                    <button @click="exportImage" class="px-4 py-2 bg-green-500 hover:bg-green-400 text-white rounded-md text-sm font-semibold transition flex items-center">
+                        <i class="fa-solid fa-image mr-2"></i> 导出图片
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="container mx-auto px-4 py-8">
+            
+            <!-- Project Info Card -->
+            <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-slate-200">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div>
+                        <label class="block text-sm font-medium text-slate-500 mb-1">项目名称</label>
+                        <input type="text" v-model="project.projectName" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="例如：未来科技">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-500 mb-1">所属行业</label>
+                        <select v-model="project.industry" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none bg-white">
+                            <option value="SaaS">SaaS / 软件</option>
+                            <option value="E-commerce">电商 / 消费品</option>
+                            <option value="AI">人工智能 / 大数据</option>
+                            <option value="Hardware">智能硬件 / IoT</option>
+                            <option value="Biotech">生物科技 / 医疗</option>
+                            <option value="Other">其他</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-slate-500 mb-1">当前阶段</label>
+                        <select v-model="project.stage" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none bg-white">
+                            <option value="Idea">创意阶段 (Idea)</option>
+                            <option value="MVP">原型阶段 (MVP)</option>
+                            <option value="Early Revenue">早期收入 (Early Revenue)</option>
+                            <option value="Growth">成长期 (Growth)</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tabs Navigation -->
+            <div class="flex space-x-1 bg-slate-200 p-1 rounded-lg mb-6 no-print overflow-x-auto">
+                <button v-for="tab in tabs" :key="tab.id"
+                    @click="currentTab = tab.id"
+                    :class="['flex-1 py-2 px-4 rounded-md text-sm font-medium transition whitespace-nowrap', currentTab === tab.id ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-600 hover:text-indigo-600']">
+                    <i :class="tab.icon + ' mr-2'"></i>${ tab.name }
+                </button>
+            </div>
+
+            <!-- Tab 1: Berkus Method -->
+            <div v-show="currentTab === 'berkus'" class="space-y-6">
+                <div class="bg-white rounded-xl shadow-sm p-6 border border-slate-200">
+                    <div class="flex justify-between items-start mb-4">
+                        <div>
+                            <h2 class="text-xl font-bold text-slate-800">Berkus 估值法</h2>
+                            <p class="text-sm text-slate-500 mt-1">适用于尚未产生收入的早期初创企业。通过评估5个关键风险维度的降低程度来计算估值。</p>
+                        </div>
+                        <div class="text-right">
+                            <div class="text-sm text-slate-500">当前估值 (Pre-money)</div>
+                            <div class="text-3xl font-bold text-indigo-600">$${ formatNumber(berkusValuation) }</div>
+                        </div>
+                    </div>
+
+                    <div class="space-y-6 mt-8">
+                        <div v-for="(factor, index) in project.berkusFactors" :key="index" class="bg-slate-50 p-4 rounded-lg">
+                            <div class="flex justify-between mb-2">
+                                <label class="font-semibold text-slate-700">${ factor.name }</label>
+                                <span class="font-mono text-indigo-600">$${ formatNumber(factor.value) }</span>
+                            </div>
+                            <input type="range" v-model.number="factor.value" min="0" max="500000" step="50000" class="w-full h-2 bg-slate-300 rounded-lg appearance-none cursor-pointer">
+                            <p class="text-xs text-slate-500 mt-2">${ factor.desc }</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tab 2: Scorecard Method -->
+            <div v-show="currentTab === 'scorecard'" class="space-y-6">
+                <div class="bg-white rounded-xl shadow-sm p-6 border border-slate-200">
+                    <div class="flex justify-between items-start mb-4">
+                        <div>
+                            <h2 class="text-xl font-bold text-slate-800">记分卡估值法 (Scorecard Method)</h2>
+                            <p class="text-sm text-slate-500 mt-1">通过与同行业类似初创企业的平均估值进行对比，根据团队、市场等加权因子调整估值。</p>
+                        </div>
+                        <div class="text-right">
+                            <div class="text-sm text-slate-500">当前估值 (Pre-money)</div>
+                            <div class="text-3xl font-bold text-purple-600">$${ formatNumber(scorecardValuation) }</div>
+                        </div>
+                    </div>
+
+                    <div class="mb-8">
+                        <label class="block text-sm font-medium text-slate-700 mb-2">行业平均 Pre-money 估值</label>
+                        <div class="flex items-center">
+                            <span class="text-slate-500 mr-2">$</span>
+                            <input type="number" v-model.number="project.industryAverageValuation" class="w-48 px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-purple-500 outline-none">
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div v-for="(factor, index) in project.scorecardFactors" :key="index" class="bg-slate-50 p-4 rounded-lg border border-slate-100">
+                            <div class="flex justify-between items-center mb-2">
+                                <span class="font-semibold text-slate-700 text-sm">${ factor.name } (权重: ${ factor.weight }%)</span>
+                                <span class="text-xs font-bold px-2 py-1 rounded" 
+                                    :class="factor.percentage >= 100 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'">
+                                    ${ factor.percentage }%
+                                </span>
+                            </div>
+                            <input type="range" v-model.number="factor.percentage" min="50" max="150" step="5" class="w-full h-2 bg-slate-300 rounded-lg appearance-none cursor-pointer">
+                            <div class="flex justify-between text-xs text-slate-400 mt-1">
+                                <span>弱 (50%)</span>
+                                <span>平均 (100%)</span>
+                                <span>强 (150%)</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tab 3: Funding & Dilution -->
+            <div v-show="currentTab === 'dilution'" class="space-y-6">
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <!-- Inputs -->
+                    <div class="bg-white rounded-xl shadow-sm p-6 border border-slate-200 lg:col-span-1">
+                        <h3 class="text-lg font-bold mb-4">融资参数设定</h3>
+                        
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 mb-1">选定 Pre-money 估值</label>
+                                <div class="flex space-x-2 mb-2">
+                                    <button @click="project.selectedPreMoney = berkusValuation" class="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded hover:bg-indigo-200">使用 Berkus</button>
+                                    <button @click="project.selectedPreMoney = scorecardValuation" class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded hover:bg-purple-200">使用 Scorecard</button>
+                                </div>
+                                <div class="relative">
+                                    <span class="absolute left-3 top-2 text-slate-500">$</span>
+                                    <input type="number" v-model.number="project.selectedPreMoney" class="w-full pl-8 pr-4 py-2 border border-slate-300 rounded-lg">
+                                </div>
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 mb-1">融资金额 (Investment)</label>
+                                <div class="relative">
+                                    <span class="absolute left-3 top-2 text-slate-500">$</span>
+                                    <input type="number" v-model.number="project.investmentAmount" class="w-full pl-8 pr-4 py-2 border border-slate-300 rounded-lg">
+                                </div>
+                            </div>
+
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 mb-1">期权池 (Option Pool %)</label>
+                                <div class="relative">
+                                    <input type="number" v-model.number="project.optionPool" min="0" max="30" class="w-full px-4 py-2 border border-slate-300 rounded-lg">
+                                    <span class="absolute right-3 top-2 text-slate-500">%</span>
+                                </div>
+                                <p class="text-xs text-slate-500 mt-1">通常为 Post-money 的 10-20%</p>
+                            </div>
+                            
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 mb-1">当前总股数</label>
+                                <input type="number" v-model.number="project.totalShares" class="w-full px-4 py-2 border border-slate-300 rounded-lg">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Results -->
+                    <div class="bg-white rounded-xl shadow-sm p-6 border border-slate-200 lg:col-span-2">
+                        <h3 class="text-lg font-bold mb-4">融资后股权结构 (Post-money Cap Table)</h3>
+                        
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                            <div>
+                                <div class="mb-6">
+                                    <div class="text-sm text-slate-500">Post-money 估值</div>
+                                    <div class="text-2xl font-bold text-green-600">$${ formatNumber(postMoneyValuation) }</div>
+                                </div>
+                                <div class="mb-6">
+                                    <div class="text-sm text-slate-500">每股价格</div>
+                                    <div class="text-xl font-bold text-slate-800">$${ formatNumber(pricePerShare, 2) }</div>
+                                </div>
+                                
+                                <table class="w-full text-sm">
+                                    <thead>
+                                        <tr class="border-b">
+                                            <th class="text-left py-2">股东</th>
+                                            <th class="text-right py-2">股份 %</th>
+                                            <th class="text-right py-2">价值</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr class="text-slate-700">
+                                            <td class="py-2">创始人团队</td>
+                                            <td class="text-right font-mono">${ formatNumber(foundersPercent, 1) }%</td>
+                                            <td class="text-right font-mono">$${ formatNumber(foundersValue) }</td>
+                                        </tr>
+                                        <tr class="text-indigo-600 font-semibold">
+                                            <td class="py-2">新投资人</td>
+                                            <td class="text-right font-mono">${ formatNumber(investorsPercent, 1) }%</td>
+                                            <td class="text-right font-mono">$${ formatNumber(project.investmentAmount) }</td>
+                                        </tr>
+                                        <tr class="text-slate-500">
+                                            <td class="py-2">期权池 (ESOP)</td>
+                                            <td class="text-right font-mono">${ formatNumber(project.optionPool, 1) }%</td>
+                                            <td class="text-right font-mono">$${ formatNumber(optionPoolValue) }</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            
+                            <div class="flex items-center justify-center h-64">
+                                <canvas id="dilutionChart"></canvas>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tab 4: Term Sheet Generator -->
+            <div v-show="currentTab === 'termsheet'" class="space-y-6">
+                <div class="bg-white rounded-xl shadow-sm p-6 border border-slate-200">
+                    <h2 class="text-xl font-bold mb-6">投资意向书生成器 (Lite)</h2>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700 mb-1">投资方名称</label>
+                            <input type="text" v-model="project.investorName" class="w-full px-4 py-2 border border-slate-300 rounded-lg">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700 mb-1">交割日期</label>
+                            <input type="date" v-model="project.closingDate" class="w-full px-4 py-2 border border-slate-300 rounded-lg">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700 mb-1">清算优先权 (Liquidation Preference)</label>
+                            <select v-model="project.liquidationPref" class="w-full px-4 py-2 border border-slate-300 rounded-lg bg-white">
+                                <option value="1x Non-Participating">1x 不参与分配 (标准)</option>
+                                <option value="1x Participating">1x 参与分配 (对投资人有利)</option>
+                                <option value="2x Non-Participating">2x 不参与分配 (苛刻)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700 mb-1">董事会席位 (Board Seats)</label>
+                            <div class="flex items-center space-x-2">
+                                <input type="number" v-model="project.boardSeatsFounder" placeholder="创始人" class="w-1/3 px-4 py-2 border border-slate-300 rounded-lg">
+                                <span>+</span>
+                                <input type="number" v-model="project.boardSeatsInvestor" placeholder="投资人" class="w-1/3 px-4 py-2 border border-slate-300 rounded-lg">
+                                <span>+</span>
+                                <input type="number" v-model="project.boardSeatsIndependent" placeholder="独立" class="w-1/3 px-4 py-2 border border-slate-300 rounded-lg">
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-slate-50 p-6 rounded-lg border border-slate-200 font-mono text-sm whitespace-pre-wrap leading-relaxed">${ termSheetText }</div>
+                    
+                    <div class="mt-4 text-right">
+                        <button @click="copyTermSheet" class="text-indigo-600 hover:text-indigo-800 font-medium">
+                            <i class="fa-solid fa-copy mr-1"></i> 复制内容
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tab 5: Report Preview (For Print) -->
+            <div v-show="currentTab === 'report'" class="bg-white rounded-xl shadow-sm p-8 border border-slate-200 print-section">
+                <div class="text-center border-b pb-6 mb-6">
+                    <h1 class="text-3xl font-bold text-slate-800">${ project.projectName }</h1>
+                    <p class="text-slate-500 mt-2">估值与融资分析报告</p>
+                    <p class="text-sm text-slate-400 mt-1">${ new Date().toLocaleDateString() }</p>
+                </div>
+
+                <div class="grid grid-cols-2 gap-8 mb-8">
+                    <div>
+                        <h3 class="font-bold text-slate-700 border-b mb-2">项目概况</h3>
+                        <p><span class="text-slate-500 w-24 inline-block">行业:</span> ${ project.industry }</p>
+                        <p><span class="text-slate-500 w-24 inline-block">阶段:</span> ${ project.stage }</p>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-slate-700 border-b mb-2">估值综述</h3>
+                        <p><span class="text-slate-500 w-32 inline-block">Berkus 估值:</span> $${ formatNumber(berkusValuation) }</p>
+                        <p><span class="text-slate-500 w-32 inline-block">Scorecard 估值:</span> $${ formatNumber(scorecardValuation) }</p>
+                    </div>
+                </div>
+
+                <div class="mb-8">
+                    <h3 class="font-bold text-slate-700 border-b mb-4">拟议融资结构</h3>
+                    <div class="grid grid-cols-3 gap-4 text-center">
+                        <div class="bg-slate-50 p-4 rounded">
+                            <div class="text-xs text-slate-500">Pre-money</div>
+                            <div class="font-bold text-lg">$${ formatNumber(project.selectedPreMoney) }</div>
+                        </div>
+                        <div class="bg-slate-50 p-4 rounded">
+                            <div class="text-xs text-slate-500">融资金额</div>
+                            <div class="font-bold text-lg text-indigo-600">$${ formatNumber(project.investmentAmount) }</div>
+                        </div>
+                        <div class="bg-slate-50 p-4 rounded">
+                            <div class="text-xs text-slate-500">Post-money</div>
+                            <div class="font-bold text-lg text-green-600">$${ formatNumber(postMoneyValuation) }</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="text-center text-xs text-slate-400 mt-12">
+                    Generated by Startup Valuation Engine. This document is for simulation purposes only.
+                </div>
+            </div>
+
+        </main>
+
+        <!-- Load Project Modal -->
+        <div v-if="showLoadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 no-print">
+            <div class="bg-white rounded-lg p-6 w-full max-w-md">
+                <h3 class="text-lg font-bold mb-4">加载项目</h3>
+                <div v-if="savedProjects.length === 0" class="text-center text-slate-500 py-4">
+                    暂无已保存的项目
+                </div>
+                <ul class="space-y-2 max-h-60 overflow-y-auto">
+                    <li v-for="p in savedProjects" :key="p.filename" 
+                        class="flex justify-between items-center p-3 hover:bg-slate-50 rounded cursor-pointer border border-transparent hover:border-slate-200"
+                        @click="loadProject(p.filename)">
+                        <div>
+                            <div class="font-medium">${ p.projectName }</div>
+                            <div class="text-xs text-slate-400">${ p.updatedAt }</div>
+                        </div>
+                        <i class="fa-solid fa-chevron-right text-slate-300"></i>
+                    </li>
+                </ul>
+                <div class="mt-4 text-right">
+                    <button @click="showLoadModal = false" class="text-slate-500 hover:text-slate-700">关闭</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Toast Notification -->
+        <div v-if="toast.show" class="fixed bottom-4 right-4 bg-slate-800 text-white px-4 py-2 rounded shadow-lg transition-opacity duration-300 z-50">
+            ${ toast.message }
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, computed, onMounted, watch } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                // State
+                const currentTab = ref('berkus');
+                const showLoadModal = ref(false);
+                const savedProjects = ref([]);
+                const toast = ref({ show: false, message: '' });
+                let chartInstance = null;
+
+                const tabs = [
+                    { id: 'berkus', name: 'Berkus 估值', icon: 'fa-solid fa-gavel' },
+                    { id: 'scorecard', name: '记分卡估值', icon: 'fa-solid fa-clipboard-check' },
+                    { id: 'dilution', name: '融资稀释', icon: 'fa-solid fa-chart-pie' },
+                    { id: 'termsheet', name: '投资意向书', icon: 'fa-solid fa-file-contract' },
+                    { id: 'report', name: '报告预览', icon: 'fa-solid fa-file-pdf' }
+                ];
+
+                const project = ref({
+                    projectName: '',
+                    industry: 'SaaS',
+                    stage: 'MVP',
+                    // Berkus Data
+                    berkusFactors: [
+                        { name: '创意价值 (Sound Idea)', value: 0, desc: '产品创意是否存在基本价值和风险规避？(最高 $500k)' },
+                        { name: '原型验证 (Prototype)', value: 0, desc: '是否有可工作的原型来降低技术风险？(最高 $500k)' },
+                        { name: '管理团队 (Quality Team)', value: 0, desc: '是否有高质量的管理团队来降低执行风险？(最高 $500k)' },
+                        { name: '战略关系 (Relationships)', value: 0, desc: '是否有战略合作伙伴/早期客户来降低市场风险？(最高 $500k)' },
+                        { name: '产品发布/销售 (Rollout)', value: 0, desc: '产品是否已发布或产生销售来降低生产风险？(最高 $500k)' }
+                    ],
+                    // Scorecard Data
+                    industryAverageValuation: 2000000,
+                    scorecardFactors: [
+                        { name: '团队实力', weight: 30, percentage: 100 },
+                        { name: '市场机会大小', weight: 25, percentage: 100 },
+                        { name: '产品/技术壁垒', weight: 15, percentage: 100 },
+                        { name: '竞争环境', weight: 10, percentage: 100 },
+                        { name: '市场推广/销售渠道', weight: 10, percentage: 100 },
+                        { name: '额外资金需求', weight: 5, percentage: 100 },
+                        { name: '其他因素', weight: 5, percentage: 100 }
+                    ],
+                    // Dilution Data
+                    selectedPreMoney: 0,
+                    investmentAmount: 500000,
+                    optionPool: 15, // percent
+                    totalShares: 1000000,
+                    // Term Sheet Data
+                    investorName: '',
+                    closingDate: new Date().toISOString().split('T')[0],
+                    liquidationPref: '1x Non-Participating',
+                    boardSeatsFounder: 2,
+                    boardSeatsInvestor: 1,
+                    boardSeatsIndependent: 0
+                });
+
+                // Computed: Valuations
+                const berkusValuation = computed(() => {
+                    return project.value.berkusFactors.reduce((sum, f) => sum + f.value, 0);
+                });
+
+                const scorecardValuation = computed(() => {
+                    let multiplier = 0;
+                    project.value.scorecardFactors.forEach(f => {
+                        multiplier += (f.weight / 100) * (f.percentage / 100);
+                    });
+                    return Math.round(project.value.industryAverageValuation * multiplier);
+                });
+
+                // Auto-update selectedPreMoney if it's 0 or matches one of the calc methods
+                watch([berkusValuation, scorecardValuation], ([newB, newS], [oldB, oldS]) => {
+                    if (project.value.selectedPreMoney === 0) {
+                        project.value.selectedPreMoney = newB > 0 ? newB : newS;
+                    }
+                });
+
+                // Computed: Dilution
+                const postMoneyValuation = computed(() => {
+                    return project.value.selectedPreMoney + project.value.investmentAmount;
+                });
+
+                const optionPoolValue = computed(() => {
+                    // Option pool is typically calculated on post-money basis
+                    // Value = PostMoney * (OptionPool% / 100)
+                    return Math.round(postMoneyValuation.value * (project.value.optionPool / 100));
+                });
+
+                // Effective Pre-Money (Pre-Money - Option Pool increase usually comes from pre-money side effectively)
+                // But for simplicity here: 
+                // Founders own: (PreMoney / PostMoney) - OptionPool%? 
+                // Let's use standard VC math:
+                // PostMoney = PreMoney + Investment
+                // Investor% = Investment / PostMoney
+                // OptionPool% is fixed at PostMoney
+                // Founders% = 100% - Investor% - OptionPool%
+                
+                const investorsPercent = computed(() => {
+                    if (postMoneyValuation.value === 0) return 0;
+                    return (project.value.investmentAmount / postMoneyValuation.value) * 100;
+                });
+
+                const foundersPercent = computed(() => {
+                    return 100 - investorsPercent.value - project.value.optionPool;
+                });
+
+                const foundersValue = computed(() => {
+                    return Math.round(postMoneyValuation.value * (foundersPercent.value / 100));
+                });
+                
+                const pricePerShare = computed(() => {
+                    // If we assume totalShares (founders) represents the foundersPercent
+                    // FoundersShares / Founders% = TotalPostShares
+                    // Price = PostMoney / TotalPostShares
+                    if (foundersPercent.value <= 0) return 0;
+                    const totalPostShares = project.value.totalShares / (foundersPercent.value / 100);
+                    return postMoneyValuation.value / totalPostShares;
+                });
+
+                // Computed: Term Sheet Text
+                const termSheetText = computed(() => {
+                    return `INVESTMENT TERM SHEET (SUMMARY)
+                    
+Company: ${project.value.projectName || '[Company Name]'}
+Investor: ${project.value.investorName || '[Investor Name]'}
+Date: ${project.value.closingDate}
+
+1. Valuation & Investment
+   - Pre-money Valuation: $${formatNumber(project.value.selectedPreMoney)}
+   - Investment Amount: $${formatNumber(project.value.investmentAmount)}
+   - Post-money Valuation: $${formatNumber(postMoneyValuation.value)}
+
+2. Capitalization
+   - Employee Option Pool: ${project.value.optionPool}% (Post-money basis)
+   - Investor Ownership: ${formatNumber(investorsPercent.value, 1)}%
+
+3. Liquidation Preference
+   - ${project.value.liquidationPref}
+   - In the event of a sale or liquidation, investors receive their preference amount before common shareholders.
+
+4. Board of Directors
+   - The Board shall consist of ${project.value.boardSeatsFounder + project.value.boardSeatsInvestor + project.value.boardSeatsIndependent} members:
+     - ${project.value.boardSeatsFounder} Founder representative(s)
+     - ${project.value.boardSeatsInvestor} Investor representative(s)
+     - ${project.value.boardSeatsIndependent} Independent member(s)
+
+5. Dividends
+   - Non-cumulative dividends will be paid on the Preferred Stock when and if declared by the Board.
+
+[This is a non-binding summary for simulation purposes only.]`;
+                });
+
+                // Methods
+                const formatNumber = (num, decimals = 0) => {
+                    if (!num && num !== 0) return '0';
+                    return num.toLocaleString('en-US', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+                };
+
+                const showToast = (msg) => {
+                    toast.value.message = msg;
+                    toast.value.show = true;
+                    setTimeout(() => toast.value.show = false, 3000);
+                };
+
+                const saveProject = async () => {
+                    try {
+                        const res = await fetch('/api/save', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(project.value)
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                            showToast('保存成功');
+                            loadProjectList();
+                        } else {
+                            showToast('保存失败: ' + data.message);
+                        }
+                    } catch (e) {
+                        showToast('保存错误');
+                    }
+                };
+
+                const loadProjectList = async () => {
+                    try {
+                        const res = await fetch('/api/load');
+                        const data = await res.json();
+                        if (data.success) {
+                            savedProjects.value = data.projects;
+                        }
+                    } catch (e) {
+                        console.error(e);
+                    }
+                };
+
+                const loadProject = async (filename) => {
+                    try {
+                        const res = await fetch('/api/load/' + filename);
+                        const data = await res.json();
+                        if (data.success) {
+                            project.value = data.data;
+                            showLoadModal.value = false;
+                            showToast('加载成功');
+                        }
+                    } catch (e) {
+                        showToast('加载失败');
+                    }
+                };
+
+                const copyTermSheet = () => {
+                    navigator.clipboard.writeText(termSheetText.value);
+                    showToast('已复制到剪贴板');
+                };
+                
+                const printReport = () => {
+                    currentTab.value = 'report';
+                    setTimeout(() => {
+                        window.print();
+                    }, 500);
+                };
+
+                const exportImage = async () => {
+                    currentTab.value = 'report';
+                    // Wait for render
+                    await new Promise(r => setTimeout(r, 800));
+                    
+                    const element = document.querySelector('.print-section');
+                    if (!element) return;
+
+                    try {
+                        showToast('正在生成图片...', 5000);
+                        const canvas = await html2canvas(element, {
+                            scale: 2,
+                            backgroundColor: '#ffffff',
+                            useCORS: true
+                        });
+                        
+                        const link = document.createElement('a');
+                        link.download = `${project.value.projectName || 'project'}-valuation-report.png`;
+                        link.href = canvas.toDataURL('image/png');
+                        link.click();
+                        showToast('图片导出成功');
+                    } catch (e) {
+                        console.error(e);
+                        showToast('导出失败，请重试');
+                    }
+                };
+                
+                const loadDemoData = () => {
+                    project.value = {
+                        projectName: '演示科技 (DemoTech)',
+                        industry: 'AI',
+                        stage: 'MVP',
+                        berkusFactors: [
+                            { name: '创意价值 (Sound Idea)', value: 350000, desc: '产品创意是否存在基本价值和风险规避？(最高 $500k)' },
+                            { name: '原型验证 (Prototype)', value: 400000, desc: '是否有可工作的原型来降低技术风险？(最高 $500k)' },
+                            { name: '管理团队 (Quality Team)', value: 250000, desc: '是否有高质量的管理团队来降低执行风险？(最高 $500k)' },
+                            { name: '战略关系 (Relationships)', value: 100000, desc: '是否有战略合作伙伴/早期客户来降低市场风险？(最高 $500k)' },
+                            { name: '产品发布/销售 (Rollout)', value: 0, desc: '产品是否已发布或产生销售来降低生产风险？(最高 $500k)' }
+                        ],
+                        industryAverageValuation: 3000000,
+                        scorecardFactors: [
+                            { name: '团队实力', weight: 30, percentage: 120 },
+                            { name: '市场机会大小', weight: 25, percentage: 110 },
+                            { name: '产品/技术壁垒', weight: 15, percentage: 115 },
+                            { name: '竞争环境', weight: 10, percentage: 90 },
+                            { name: '市场推广/销售渠道', weight: 10, percentage: 80 },
+                            { name: '额外资金需求', weight: 5, percentage: 100 },
+                            { name: '其他因素', weight: 5, percentage: 100 }
+                        ],
+                        selectedPreMoney: 0,
+                        investmentAmount: 800000,
+                        optionPool: 15,
+                        totalShares: 1000000,
+                        investorName: '红杉资本 (Sequoia)',
+                        closingDate: new Date().toISOString().split('T')[0],
+                        liquidationPref: '1x Non-Participating',
+                        boardSeatsFounder: 2,
+                        boardSeatsInvestor: 1,
+                        boardSeatsIndependent: 0
+                    };
+                    showToast('演示数据已加载');
+                };
+                const updateChart = () => {
+                    if (!document.getElementById('dilutionChart')) return;
+                    
+                    const ctx = document.getElementById('dilutionChart').getContext('2d');
+                    
+                    if (chartInstance) {
+                        chartInstance.destroy();
+                    }
+                    
+                    chartInstance = new Chart(ctx, {
+                        type: 'doughnut',
+                        data: {
+                            labels: ['创始人团队', '新投资人', '期权池'],
+                            datasets: [{
+                                data: [foundersPercent.value, investorsPercent.value, project.value.optionPool],
+                                backgroundColor: ['#94a3b8', '#4f46e5', '#cbd5e1'],
+                                borderWidth: 0
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            plugins: {
+                                legend: { position: 'bottom' }
+                            }
+                        }
+                    });
+                };
+
+                // Watch for chart updates
+                watch([foundersPercent, investorsPercent, () => project.value.optionPool, currentTab], () => {
+                    if (currentTab.value === 'dilution') {
+                        // Small delay to ensure DOM is ready
+                        setTimeout(updateChart, 100);
+                    }
+                });
+
+                onMounted(() => {
+                    loadProjectList();
+                    // Set default Berkus values to non-zero for demo
+                    project.value.berkusFactors[0].value = 150000;
+                    project.value.berkusFactors[1].value = 100000;
+                    
+                    if (currentTab.value === 'dilution') {
+                        setTimeout(updateChart, 100);
+                    }
+                });
+
+                return {
+                    currentTab,
+                    tabs,
+                    project,
+                    berkusValuation,
+                    scorecardValuation,
+                    postMoneyValuation,
+                    investorsPercent,
+                    foundersPercent,
+                    foundersValue,
+                    optionPoolValue,
+                    pricePerShare,
+                    termSheetText,
+                    formatNumber,
+                    saveProject,
+                    showLoadModal,
+                    savedProjects,
+                    loadProject,
+                    copyTermSheet,
+                    printReport,
+                    toast,
+                    loadDemoData,
+                    exportImage
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>