Hugging Face's logo

Spaces:
duqing026
/
cap-table-architect
Sleeping

App Files Community
duqing2026 commited on
Commit
aa1252f
·
0 Parent(s):

Initial commit: Cap Table Architect MVP

Browse files
Files changed (4) hide show
  1. Dockerfile +11 -0
  2. README.md +37 -0
  3. app.py +21 -0
  4. templates/index.html +433 -0
Dockerfile ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ FROM python:3.9-slim
2
+
3
+ WORKDIR /app
4
+
5
+ COPY . /app
6
+
7
+ RUN pip install --no-cache-dir flask
8
+
9
+ EXPOSE 7860
10
+
11
+ CMD ["python", "app.py"]
README.md ADDED
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: Cap Table Architect
3
+ emoji: 📊
4
+ colorFrom: indigo
5
+ colorTo: purple
6
+ sdk: docker
7
+ pinned: false
8
+ short_description: 专业的创业股权架构模拟器与Cap Table管理工具
9
+ ---
10
+
11
+ # Cap Table Architect (股权架构师)
12
+
13
+ 这是一个为创业者设计的专业股权架构模拟工具。它可以帮助你规划从天使轮到上市的每一轮融资，计算股权稀释，模拟期权池影响，并预测退出回报。
14
+
15
+ ## 核心功能
16
+
17
+ * **多轮次模拟**: 支持自定义添加天使轮、A轮、B轮等无限轮次。
18
+ * **智能计算**: 自动计算投前/投后估值、每股价格、期权池稀释影响。
19
+ * **可视化图表**: 实时生成股权结构饼图 (Pie Chart) 和创始人稀释曲线 (Dilution Curve)。
20
+ * **退出模拟**: 输入预计退出估值，自动计算每位股东的回报金额。
21
+ * **隐私安全**: 所有数据仅在浏览器本地计算，不会上传服务器。
22
+
23
+ ## 技术栈
24
+
25
+ * **Backend**: Python Flask (轻量级静态服务)
26
+ * **Frontend**: Vue 3 (响应式交互), Chart.js (数据可视化), Tailwind CSS (现代 UI)
27
+ * **Deployment**: Docker
28
+
29
+ ## 快速开始
30
+
31
+ 1. 克隆仓库
32
+ 2. 运行 `python app.py`
33
+ 3. 访问 `http://localhost:7860`
34
+
35
+ ## 关于项目
36
+
37
+ 此项目旨在帮助初创团队更好地理解股权分配背后的数学逻辑，避免常见的股权陷阱。
app.py ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from flask import Flask, render_template, send_from_directory, request, jsonify
2
+ import os
3
+
4
+ app = Flask(__name__)
5
+
6
+ @app.route('/')
7
+ def index():
8
+ return render_template('index.html')
9
+
10
+ @app.route('/health')
11
+ def health():
12
+ return "OK", 200
13
+
14
+ # Explicitly serve static files
15
+ @app.route('/static/<path:path>')
16
+ def send_static(path):
17
+ return send_from_directory('static', path)
18
+
19
+ if __name__ == '__main__':
20
+ port = int(os.environ.get('PORT', 7860))
21
+ app.run(host='0.0.0.0', port=port, debug=True)
templates/index.html ADDED
@@ -0,0 +1,433 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cap Table Architect - 股权架构师</title>
7
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
13
+ body { font-family: 'Inter', sans-serif; }
14
+ .slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.3s ease; }
15
+ .slide-fade-enter-from, .slide-fade-leave-to { opacity: 0; transform: translateY(10px); }
16
+ </style>
17
+ </head>
18
+ <body class="bg-slate-50 text-slate-800">
19
+ <div id="app" class="min-h-screen flex flex-col">
20
+ <!-- Header -->
21
+ <header class="bg-white border-b border-slate-200 sticky top-0 z-10">
22
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
23
+ <div class="flex items-center gap-3">
24
+ <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center text-white text-xl font-bold">
25
+ <i class="fa-solid fa-chart-pie"></i>
26
+ </div>
27
+ <div>
28
+ <h1 class="text-xl font-bold text-slate-900 tracking-tight">Cap Table Architect</h1>
29
+ <p class="text-xs text-slate-500">创业股权架构模拟器</p>
30
+ </div>
31
+ </div>
32
+ <div class="flex gap-2">
33
+ <button @click="resetData" class="px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100 rounded-md transition-colors">
34
+ <i class="fa-solid fa-rotate-right mr-1"></i> 重置
35
+ </button>
36
+ <button @click="exportData" class="px-3 py-1.5 text-sm bg-indigo-600 text-white hover:bg-indigo-700 rounded-md transition-colors shadow-sm">
37
+ <i class="fa-solid fa-download mr-1"></i> 导出报告
38
+ </button>
39
+ </div>
40
+ </div>
41
+ </header>
42
+
43
+ <!-- Main Content -->
44
+ <main class="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full grid grid-cols-1 lg:grid-cols-12 gap-8">
45
+
46
+ <!-- Left Column: Inputs -->
47
+ <div class="lg:col-span-5 space-y-6">
48
+
49
+ <!-- Initial Setup Card -->
50
+ <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
51
+ <div class="px-6 py-4 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
52
+ <h2 class="font-semibold text-slate-800"><i class="fa-solid fa-user-group mr-2 text-indigo-500"></i>初始创始人</h2>
53
+ <button @click="addFounder" class="text-xs bg-white border border-slate-300 px-2 py-1 rounded hover:bg-slate-50">+ 添加</button>
54
+ </div>
55
+ <div class="p-6 space-y-4">
56
+ <div v-for="(founder, index) in founders" :key="index" class="flex items-center gap-2">
57
+ <input type="text" v-model="founder.name" class="flex-1 px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 outline-none" placeholder="姓名">
58
+ <div class="relative w-32">
59
+ <input type="number" v-model.number="founder.shares" class="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 outline-none" placeholder="股数">
60
+ </div>
61
+ <button @click="removeFounder(index)" class="text-slate-400 hover:text-red-500 transition-colors" v-if="founders.length > 1">
62
+ <i class="fa-solid fa-trash"></i>
63
+ </button>
64
+ </div>
65
+ <div class="text-xs text-slate-500 text-right">初始总股数: {{ formatNumber(totalInitialShares) }}</div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Rounds Card -->
70
+ <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
71
+ <div class="px-6 py-4 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
72
+ <h2 class="font-semibold text-slate-800"><i class="fa-solid fa-layer-group mr-2 text-indigo-500"></i>融资轮次</h2>
73
+ <button @click="addRound" class="text-xs bg-indigo-50 text-indigo-600 border border-indigo-200 px-2 py-1 rounded hover:bg-indigo-100">+ 新增轮次</button>
74
+ </div>
75
+ <div class="p-6 space-y-6">
76
+ <div v-if="rounds.length === 0" class="text-center py-8 text-slate-400 text-sm">
77
+ 点击上方按钮添加天使轮/A轮等融资信息
78
+ </div>
79
+ <div v-for="(round, index) in rounds" :key="index" class="bg-slate-50 p-4 rounded-lg border border-slate-200 relative group">
80
+ <button @click="removeRound(index)" class="absolute top-2 right-2 text-slate-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity">
81
+ <i class="fa-solid fa-xmark"></i>
82
+ </button>
83
+ <div class="grid grid-cols-2 gap-4 mb-3">
84
+ <div class="col-span-2">
85
+ <label class="block text-xs font-medium text-slate-600 mb-1">轮次名称</label>
86
+ <input type="text" v-model="round.name" class="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
87
+ </div>
88
+ <div>
89
+ <label class="block text-xs font-medium text-slate-600 mb-1">投前估值 (Pre-Money)</label>
90
+ <div class="relative">
91
+ <span class="absolute left-3 top-2 text-slate-400">¥</span>
92
+ <input type="number" v-model.number="round.preMoney" class="w-full pl-6 pr-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
93
+ </div>
94
+ </div>
95
+ <div>
96
+ <label class="block text-xs font-medium text-slate-600 mb-1">融资金额 (Investment)</label>
97
+ <div class="relative">
98
+ <span class="absolute left-3 top-2 text-slate-400">¥</span>
99
+ <input type="number" v-model.number="round.investment" class="w-full pl-6 pr-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
100
+ </div>
101
+ </div>
102
+ <div class="col-span-2">
103
+ <label class="block text-xs font-medium text-slate-600 mb-1">期权池增发 (Option Pool Increase %)</label>
104
+ <div class="flex items-center gap-2">
105
+ <input type="range" v-model.number="round.optionPoolPercent" min="0" max="30" step="0.5" class="flex-1 accent-indigo-600">
106
+ <span class="text-sm w-12 text-right">{{ round.optionPoolPercent }}%</span>
107
+ </div>
108
+ <p class="text-[10px] text-slate-400 mt-1">* 假设为投后扩充 (Post-Money Option Pool)</p>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Exit Simulation -->
116
+ <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
117
+ <div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
118
+ <h2 class="font-semibold text-slate-800"><i class="fa-solid fa-flag-checkered mr-2 text-indigo-500"></i>退出模拟</h2>
119
+ </div>
120
+ <div class="p-6">
121
+ <label class="block text-xs font-medium text-slate-600 mb-1">预计退出估值 (Exit Valuation)</label>
122
+ <div class="relative">
123
+ <span class="absolute left-3 top-2 text-slate-400">¥</span>
124
+ <input type="number" v-model.number="exitValuation" class="w-full pl-6 pr-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 outline-none font-bold text-slate-700">
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ </div>
130
+
131
+ <!-- Right Column: Visualization -->
132
+ <div class="lg:col-span-7 space-y-6">
133
+
134
+ <!-- Cap Table -->
135
+ <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
136
+ <div class="px-6 py-4 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
137
+ <h2 class="font-semibold text-slate-800">股权结构表 (Cap Table)</h2>
138
+ <span class="text-xs text-slate-500">最新每股价格: <span class="font-mono font-bold text-indigo-600">¥{{ formatCurrency(currentSharePrice) }}</span></span>
139
+ </div>
140
+ <div class="overflow-x-auto">
141
+ <table class="w-full text-sm text-left">
142
+ <thead class="bg-slate-50 text-slate-600 font-medium border-b border-slate-200">
143
+ <tr>
144
+ <th class="px-6 py-3">股东</th>
145
+ <th class="px-6 py-3 text-right">股数</th>
146
+ <th class="px-6 py-3 text-right">比例 (%)</th>
147
+ <th class="px-6 py-3 text-right">价值 (当前)</th>
148
+ <th class="px-6 py-3 text-right bg-indigo-50 text-indigo-700">退出回报</th>
149
+ </tr>
150
+ </thead>
151
+ <tbody class="divide-y divide-slate-100">
152
+ <tr v-for="row in capTableRows" :key="row.name" class="hover:bg-slate-50 transition-colors">
153
+ <td class="px-6 py-3 font-medium text-slate-700">
154
+ <div class="flex items-center gap-2">
155
+ <span class="w-2 h-2 rounded-full" :style="{ backgroundColor: row.color }"></span>
156
+ {{ row.name }}
157
+ </div>
158
+ </td>
159
+ <td class="px-6 py-3 text-right font-mono text-slate-600">{{ formatNumber(row.shares) }}</td>
160
+ <td class="px-6 py-3 text-right font-mono text-slate-600">{{ row.percent.toFixed(2) }}%</td>
161
+ <td class="px-6 py-3 text-right font-mono text-slate-600">¥{{ formatCurrency(row.value) }}</td>
162
+ <td class="px-6 py-3 text-right font-mono font-bold text-indigo-600 bg-indigo-50/50">¥{{ formatCurrency(row.exitValue) }}</td>
163
+ </tr>
164
+ <tr class="bg-slate-50 font-bold border-t border-slate-200">
165
+ <td class="px-6 py-3 text-slate-800">总计 (Total)</td>
166
+ <td class="px-6 py-3 text-right text-slate-800">{{ formatNumber(totalShares) }}</td>
167
+ <td class="px-6 py-3 text-right text-slate-800">100.00%</td>
168
+ <td class="px-6 py-3 text-right text-slate-800">¥{{ formatCurrency(currentValuation) }}</td>
169
+ <td class="px-6 py-3 text-right text-indigo-700 bg-indigo-50/50">¥{{ formatCurrency(exitValuation) }}</td>
170
+ </tr>
171
+ </tbody>
172
+ </table>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Charts -->
177
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
178
+ <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
179
+ <h3 class="font-semibold text-slate-800 mb-4 text-sm">股权分布 (Pie)</h3>
180
+ <div class="relative h-64">
181
+ <canvas id="pieChart"></canvas>
182
+ </div>
183
+ </div>
184
+ <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
185
+ <h3 class="font-semibold text-slate-800 mb-4 text-sm">创始人稀释曲线 (Dilution)</h3>
186
+ <div class="relative h-64">
187
+ <canvas id="lineChart"></canvas>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ </div>
193
+ </main>
194
+ </div>
195
+
196
+ <script>
197
+ const { createApp, ref, computed, watch, onMounted, nextTick } = Vue;
198
+
199
+ createApp({
200
+ setup() {
201
+ // State
202
+ const founders = ref([
203
+ { name: '创始人 A', shares: 700000 },
204
+ { name: '创始人 B', shares: 300000 }
205
+ ]);
206
+
207
+ const rounds = ref([
208
+ { name: '天使轮', preMoney: 10000000, investment: 2000000, optionPoolPercent: 10 },
209
+ { name: 'A轮', preMoney: 50000000, investment: 10000000, optionPoolPercent: 5 }
210
+ ]);
211
+
212
+ const exitValuation = ref(500000000); // 5亿退出
213
+
214
+ const colors = [
215
+ '#4F46E5', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6',
216
+ '#EC4899', '#6366F1', '#14B8A6', '#F97316', '#64748B'
217
+ ];
218
+
219
+ let pieChartInstance = null;
220
+ let lineChartInstance = null;
221
+
222
+ // Methods
223
+ const addFounder = () => founders.value.push({ name: '新联合创始人', shares: 100000 });
224
+ const removeFounder = (i) => founders.value.splice(i, 1);
225
+ const addRound = () => rounds.value.push({ name: '新轮次', preMoney: 10000000, investment: 1000000, optionPoolPercent: 0 });
226
+ const removeRound = (i) => rounds.value.splice(i, 1);
227
+
228
+ const formatNumber = (num) => new Intl.NumberFormat('en-US').format(Math.round(num));
229
+ const formatCurrency = (num) => {
230
+ if (num >= 100000000) return (num / 100000000).toFixed(2) + '亿';
231
+ if (num >= 10000) return (num / 10000).toFixed(1) + '万';
232
+ return formatNumber(num);
233
+ };
234
+
235
+ const resetData = () => {
236
+ if(confirm('确定重置所有数据吗？')) {
237
+ founders.value = [{ name: '创始人 A', shares: 700000 }, { name: '创始人 B', shares: 300000 }];
238
+ rounds.value = [];
239
+ exitValuation.value = 100000000;
240
+ }
241
+ };
242
+
243
+ const exportData = () => {
244
+ alert('功能演示：报告已生成（实际项目中可对接 PDF 生成）');
245
+ };
246
+
247
+ // Calculations
248
+ const totalInitialShares = computed(() => founders.value.reduce((sum, f) => sum + f.shares, 0));
249
+
250
+ const calculationResult = computed(() => {
251
+ // Start with initial state
252
+ let currentShares = founders.value.map(f => ({ ...f, type: 'founder' }));
253
+ let optionPool = 0;
254
+ let totalShares = totalInitialShares.value;
255
+ let currentVal = 0; // Post-money valuation
256
+ let sharePrice = 1; // Default initial price (arbitrary, relative)
257
+
258
+ const history = []; // Track dilution history
259
+
260
+ // Initial State Record
261
+ history.push({
262
+ round: '初始状态',
263
+ foundersShare: 100
264
+ });
265
+
266
+ // Process Rounds
267
+ rounds.value.forEach(round => {
268
+ // 1. Calculate Option Pool Expansion (if any)
269
+ // Logic: Option Pool is usually carved out of Pre-Money or Post-Money.
270
+ // Here we use a simplified model: Create new shares for pool to reach target % of POST-money (or pre-money).
271
+ // Let's assume standard "Post-Money Option Pool" logic for simplicity in this tool context (or specifically allocated).
272
+ // Actually, simplified: Just issue new shares to pool.
273
+ // If user says "10% Pool", we add shares so pool becomes 10% of total.
274
+
275
+ // Step 1: Investment New Shares
276
+ // Price Per Share = PreMoney / TotalShares (Fully Diluted)
277
+ // But wait, if Pool is in Pre-Money, we need to expand pool first.
278
+ // Let's stick to: Price = PreMoney / CurrentTotalShares.
279
+ let pricePerShare = round.preMoney / totalShares;
280
+ if (pricePerShare === 0) pricePerShare = 1; // Safety
281
+
282
+ let newInvestorShares = round.investment / pricePerShare;
283
+
284
+ // Step 2: Option Pool (Post-Money basis for simplicity in this calculator)
285
+ // If we want pool to be X% of total post-money:
286
+ // TotalPost = TotalPre + NewInvestor + NewPool
287
+ // NewPool = TotalPost * Pool%
288
+ // This is complex circular logic.
289
+ // Simplified: Just issue specific % of current total as pool.
290
+ // Let's use: "Option Pool Increase" means we issue new shares equal to X% of *Current* Total (Pre-investment).
291
+ // OR better: The input usually implies "The pool size needs to be X% of the post-money".
292
+ // Let's do: Simply add pool shares.
293
+ // Pool Shares = (TotalExisting + NewInvestor) * Pool% / (1 - Pool%)
294
+ let poolSharesToAdd = 0;
295
+ if (round.optionPoolPercent > 0) {
296
+ let targetPoolPercent = round.optionPoolPercent / 100;
297
+ // Simple approximation: add shares to pool
298
+ // Real world is complex. Let's just add shares to dilute everyone.
299
+ // Let's say we add shares such that they represent X% of the stack BEFORE investment? No.
300
+ // Let's simply add shares:
301
+ poolSharesToAdd = (totalShares + newInvestorShares) * targetPoolPercent / (1 - targetPoolPercent);
302
+ }
303
+
304
+ // Update State
305
+ currentShares.push({ name: round.name + ' 投资人', shares: newInvestorShares, type: 'investor' });
306
+ if (poolSharesToAdd > 0) {
307
+ // Check if pool exists
308
+ let pool = currentShares.find(s => s.type === 'pool');
309
+ if (pool) pool.shares += poolSharesToAdd;
310
+ else currentShares.push({ name: '期权池 (ESOP)', shares: poolSharesToAdd, type: 'pool' });
311
+ }
312
+
313
+ totalShares += newInvestorShares + poolSharesToAdd;
314
+ currentVal = round.preMoney + round.investment; // Post money
315
+ sharePrice = currentVal / totalShares;
316
+
317
+ // Record history
318
+ let founderTotal = currentShares.filter(s => s.type === 'founder').reduce((sum, s) => sum + s.shares, 0);
319
+ history.push({
320
+ round: round.name,
321
+ foundersShare: (founderTotal / totalShares) * 100
322
+ });
323
+ });
324
+
325
+ return {
326
+ shares: currentShares,
327
+ totalShares,
328
+ valuation: currentVal || (rounds.value.length > 0 ? rounds.value[rounds.value.length-1].preMoney + rounds.value[rounds.value.length-1].investment : 10000000), // Fallback
329
+ price: sharePrice || 1,
330
+ history
331
+ };
332
+ });
333
+
334
+ const capTableRows = computed(() => {
335
+ const res = calculationResult.value;
336
+ return res.shares.map((s, idx) => ({
337
+ name: s.name,
338
+ shares: s.shares,
339
+ percent: (s.shares / res.totalShares) * 100,
340
+ value: s.shares * res.price,
341
+ exitValue: (s.shares / res.totalShares) * exitValuation.value,
342
+ color: colors[idx % colors.length]
343
+ }));
344
+ });
345
+
346
+ const totalShares = computed(() => calculationResult.value.totalShares);
347
+ const currentValuation = computed(() => calculationResult.value.valuation);
348
+ const currentSharePrice = computed(() => calculationResult.value.price);
349
+
350
+ // Chart Updates
351
+ const updateCharts = () => {
352
+ const res = calculationResult.value;
353
+ const rows = capTableRows.value;
354
+
355
+ // Pie Chart
356
+ const pieCtx = document.getElementById('pieChart');
357
+ if (pieCtx) {
358
+ if (pieChartInstance) pieChartInstance.destroy();
359
+ pieChartInstance = new Chart(pieCtx, {
360
+ type: 'doughnut',
361
+ data: {
362
+ labels: rows.map(r => r.name),
363
+ datasets: [{
364
+ data: rows.map(r => r.percent),
365
+ backgroundColor: rows.map(r => r.color),
366
+ borderWidth: 0
367
+ }]
368
+ },
369
+ options: {
370
+ responsive: true,
371
+ maintainAspectRatio: false,
372
+ plugins: { legend: { position: 'right', labels: { boxWidth: 12, font: { size: 10 } } } }
373
+ }
374
+ });
375
+ }
376
+
377
+ // Line Chart (Dilution)
378
+ const lineCtx = document.getElementById('lineChart');
379
+ if (lineCtx) {
380
+ if (lineChartInstance) lineChartInstance.destroy();
381
+ lineChartInstance = new Chart(lineCtx, {
382
+ type: 'line',
383
+ data: {
384
+ labels: res.history.map(h => h.round),
385
+ datasets: [{
386
+ label: '创始人持股比例 (%)',
387
+ data: res.history.map(h => h.foundersShare),
388
+ borderColor: '#4F46E5',
389
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
390
+ fill: true,
391
+ tension: 0.3
392
+ }]
393
+ },
394
+ options: {
395
+ responsive: true,
396
+ maintainAspectRatio: false,
397
+ scales: { y: { beginAtZero: true, max: 100 } }
398
+ }
399
+ });
400
+ }
401
+ };
402
+
403
+ watch([founders, rounds], () => {
404
+ nextTick(updateCharts);
405
+ }, { deep: true });
406
+
407
+ onMounted(() => {
408
+ updateCharts();
409
+ });
410
+
411
+ return {
412
+ founders,
413
+ rounds,
414
+ exitValuation,
415
+ addFounder,
416
+ removeFounder,
417
+ addRound,
418
+ removeRound,
419
+ resetData,
420
+ exportData,
421
+ capTableRows,
422
+ totalShares,
423
+ currentValuation,
424
+ currentSharePrice,
425
+ totalInitialShares,
426
+ formatNumber,
427
+ formatCurrency
428
+ };
429
+ }
430
+ }).mount('#app');
431
+ </script>
432
+ </body>
433
+ </html>